小开

我删除了旧的答案——下面是一个有效的答案:

维基解密:

library(shiny)
shinyUI(
pageWithSidebar(
# application title
headerPanel("test01"),
sidebarPanel(
tags$head(
tags$style(type="text/css", "select { max-width: 360px; }"),
tags$style(type="text/css", ".span4 { max-width: 360px; }"),
tags$style(type="text/css",  ".well { max-width: 360px; }")
),
wellPanel(
p(strong("Side Panel:"))
)
),


mainPanel(


div(id="XXmin",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)),
tags$head(tags$style(type="text/css", "#XXmin {display: inline-block}")),
tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")),


div(id="XXmax",textInput(inputId="xlimitsmax", label="x-max", value = 0.5)),
tags$head(tags$style(type="text/css", "#XXmax {display: inline-block}"),
tags$head(tags$style(type="text/css", "#xlimitsmax {max-width: 50px}"))


))
))

以下是我所做的修改:

1)在你的 .css语句中，我从 select#xlimitsmax和 select#xlimitsmin中去掉了 select

2)我把你的两个控件分别放在它们各自的 div()中，并给它们命名为 XXmin和 XXmax。然后，我添加了 .css语句，使它们成为 inline-block。

如果你有很多这样的语句，你可以使用 class语句，比如:

div(class="MyClass",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)),
tags$head(tags$style(type="text/css", ".MyClass {display: inline-block}")),
tags$head(tags$style(type="text/css", "#xlimitsmin {max-width: 50px}")),

然后您可以将每个控件 div()标记为 class="MyClass"，并且只使用一个 .css语句。

编辑添加: 感谢您发布的示例代码-这使得它更加容易。

第二次编辑: 只是为了澄清。将 textInput命令放在 div()中的要点是将输入框及其标签合并到一个对象中，以便应用样式(在本例中为 display样式)。如果不这样做，那么标签和框就像两个独立的实体，在这种情况下很难对它们进行操作。

小开

如果您想要在 mainPanel 中输入，可以使用以下内容:

div(class="row-fluid",
div(class="span1",textInput("xlimitsmin", label = "x-min", value = 0.0)),
div(class="span1",textInput("xlimitsmax", label = "x-max", value = 0.5)),
div(class="span1",textInput("ylimitsmin", label = "y-min", value = 0.5)),
div(class="span1",textInput("ylimitsmax", label = "y-max", value = 1.0))
)

地址:

#xlimitsmin, #xlimitsmax, #ylimitsmin, #ylimitsmax {
max-width: 25px;
}

在你的应用程序的 css 文件中(例如，在 www/目录中的 style.css) ，并通过以下方式从 ui.R 源代码:

包括 CSS (‘ www/style.R’)

我不确定为什么需要 textInput 而不是 numicInput，因为您似乎要查找的输入是数字。如果选择 numicInput，只需在上面的命令中将 textInput 替换为 numicInput。如果您想要在侧边栏面板中输入，您可以使用下面的代码。将需要上面提到的同一个 css 文件。

div(class="row-fluid",
div(class="span3",numericInput("xlimitsmin", label = "x-min", value = 0.0)),
div(class="span3",numericInput("xlimitsmax", label = "x-max", value = 0.5)),
div(class="span3",numericInput("ylimitsmin", label = "y-min", value = 0.5)),
div(class="span3",numericInput("ylimitsmax", label = "y-max", value = 1.0))
)

小开

最佳答案

解释一下(并简化为2个输入的情况) ，你的问题是:

runApp(list(
ui = bootstrapPage(
textInput(inputId="xlimitsmin", label="x-min", value = 0.0),
textInput(inputId="xlimitsmax", label="x-max", value = 0.5)
),
server = function(input, output) {}
))

表演

enter image description here

但是你需要并排的小输入，比如:

small row

简短的回答

textInputRow<-function (inputId, label, value = "")
{
div(style="display:inline-block",
tags$label(label, `for` = inputId),
tags$input(id = inputId, type = "text", value = value,class="input-small"))
}
runApp(list(
ui = bootstrapPage(
textInputRow(inputId="xlimitsmin", label="x-min", value = 0.0),
textInputRow(inputId="xlimitsmax", label="x-max", value = 0.5)
),
server = function(input, output) {}
))

提供:

enter image description here

长话短说

并排输入

让我们先并排练习:

目前 textInput 生成两个单独的标记—— label和 input，每个标记都被 CSS 配置为 display:block，这意味着它是一个矩形，将分解到容器的左侧。我们需要用新的容器(div)包装每个 textInput的字段，并告诉该容器后面的容器(下一个 textInput)允许使用 CSS 的 display:inline-block在页面的同一水平行上。

因此，我们在每个 textInput周围添加一个带有样式的 div:

runApp(list(
ui = bootstrapPage(
div(style="display:inline-block",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)),
div(style="display:inline-block",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))
),
server = function(input, output) {}
))

row

小投入

现在让我们来处理小的问题。有一些方法来处理小的问题,

把字体变小,
使输入框中的字符减少。
告诉 css 或(这里)引导程序绘制一个较小的框

由于 bootstrap.js实际上是在控制布局时，我们使用光泽，只有3将可靠地工作，所以让我们使用它。

输入大小在 Bootstrap 2.3.2的 CSS 窗体文档，在“控件大小调整”下中有记录。它包括从 mini、 small、 media、 large、 xlarge 和 xxlarge 的各种尺寸，默认值可能是 media。我们试试小一点的。

要设置大小，我们需要更改由 textInput生成的 input标记的类。

现在，textInput只是围绕更强大的 tags函数(如 tags$label和 tags$input)的一个便利函数。我们可以构建一个更强大的 textInput版本，它允许我们配置元素，特别是 input节点的类:

textInput2<-function (inputId, label, value = "",...)
{
tagList(tags$label(label, `for` = inputId), tags$input(id = inputId,
type = "text", value = value,...))
}
runApp(list(
ui = bootstrapPage(
div(style="display:inline-block",textInput2(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small")),
div(style="display:inline-block",textInput2(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small"))
),
server = function(input, output) {}
))

small row

我们已经完成了——但是我们可以通过让 textInput3生成 div 标记来滚动一些这样的功能。它也可以自己设置类，但是我将把它留给您来编写。

包起来

textInput3<-function (inputId, label, value = "",...)
{
div(style="display:inline-block",
tags$label(label, `for` = inputId),
tags$input(id = inputId, type = "text", value = value,...))
}
runApp(list(
ui = bootstrapPage(
textInput3(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small"),
textInput3(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small")
),
server = function(input, output) {}
))

为了方便起见，下面是使用类 input-mini的版本:

enter image description here

小开

也许这个解决方案在2013年还没有出现，但是如果你不想编写 HTML 或 CSS，你可以像这样在 fluidRow中使用 column函数:

  fluidRow(
column(3,
selectInput('pcat', 'Primary Category', c("ALL", "Some"))),
column(3,
selectInput('smodel', 'Statistical Model', c("NONE", "LINEAR REGRESSION", "LOWESS")))
)

它会把东西并排放在一起。

编辑: 现在有另一个非常简单的方法来做到这一点使用 splitLayout()函数。更多细节见 Nadir Sidi 的回答。

小开

作为在类中放置冗长样式声明的一种替代方法，似乎可以很容易地按照自己的喜好扩展闪亮的标记函数。默认情况下，这种特定的方法很方便使用。 (这是使用发光发亮的 _ 0.14.1)。我以为我需要写一个结尾，但这似乎工作。

inline = function (x) {
tags$div(style="display:inline-block;", x)
}


inline(textInput(inputId="xlimitsmin", label="x-min", value = 0.0)),
inline(textInput(inputId="xlimitsmax", label="x-max", value = 0.5)),
inline(textInput(inputId="ylimitsmin", label="y-min", value = 0.5)),
inline(textInput(inputId="ylimitsmax", label="y-max", value = 1.0)),

小开

使用 Shiny (> = 0.11) ，您可以通过将输入调用放在 ()中来实现这一点。这将把流体行、方框等划分为并排显示输入字段所需的必要列。

下面的示例将在一个框中提供三个文本输入，它们将并排显示在 fluidRow 中。

fluidRow(
box(width = 12, title = "A Box in a Fluid Row I want to Split",
splitLayout(
textInput("inputA", "The first input"),
textInput("inputB", "The second input"),
textInput("inputC", "The third input")
)
)
)

小开

我对 splitLayout()不满意，因为它在空间有限的情况下引入了滚动条。

我发现，至少对于像按钮或文本框这样的输入小部件来说，使用 flex-box 是一个响应性能更好的简单解决方案: (参见这个伟大的指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

div(
style = "display: flex; flex-wrap: wrap;",
div(
style = "flex: 1;",
textInput("inputA", "The first input")
),
div(
style = "flex: 1;",
textInput("inputB", "The second input")
),
div(
style = "flex: 1;",
textInput("inputC", "The third input")
)
)

可以调整相对宽度。对应于 splitLayout(cellWidths = c("25%", "75%"), ...):

div(
style = "display: flex; flex-wrap: wrap;",
div(
style = "flex: 1;",
textInput("inputA", "The first input")
),
div(
style = "flex: 3;", # second item 3 times as wide as first one
textInput("inputB", "The second input")
)
)

小开

Sgrubsmyon 的方法对我来说几乎是完美的，但是我在使用 Flex-box 方法时遇到了一个新问题，因为在输入之间没有填充。显然，这与“ display: flex”作为“ flex-growth 1”的包装器有关，后者占用了所有可用空间。我一头扎进兔子洞里，无法让它工作，但学到了一种类似的方法，使用“ CSS-Grid”，甚至更简单的 (相关的问题):

div(
style = "display: grid;
grid-template-columns: 20% repeat(3, 20%); ## same as repeat(4, 20%)
grid-gap: 10px;",


textInput("inputA", "The first input"),


textInput("inputB", "The second input"),


textInput("inputC", "The third input"),


textInput("inputD", "The fourth input")


)

对于位于给你的 CSS-Grid 方法，也有一个类似的很棒的指南，您可以在其中学习所有可以使用的不同参数和可定制性。请注意，我从来没有触及 CSS，直到2小时前写这个答案，所以任何更正是欢迎 =)

闪亮的4个小文本输入框并排放置

简短的回答

长话短说

并排输入

小投入

包起来