html图片如何和输入框并排,闪亮的4个小文本输入框并排

释义(并简化为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) {}

))

表演

在此处输入图片说明

但是您需要并排的小输入，例如：

小排

简短的答案

textInputRow

{

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) {}

))

给出：

在此处输入图片说明

长答案

并排输入

让我们先并排进行：

当前，textInput生成两个单独的标记- label和- input，每个标记由CSS配置为display:block，这意味着它是一个矩形，将在容器的左侧断开。我们需要将每个textInput字段包装在新容器(div)中，并textInput使用CSS的告诉容器其后的容器(下一个)位于页面的同一水平行上display:inline-block。

因此，我们在每个div周围添加一个样式textInput：

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) {}

))

行

小投入

现在让我们来处理小问题。有几种做小事情的方法，

缩小字体，

使输入框中的字符更少。

告诉CSS或(这里)引导程序绘制一个较小的框

因为bootstrap.js当我们使用光亮效果时实际上可以控制布局，所以只有3个可以可靠地起作用，所以让我们使用它。

输入大小记录在Bootstrap 2.3.2的CSS Forms文档中的“控件大小”下。它包括mini，small，medium，large，xlarge和xxlarge的各种大小，默认大小可能是中号。让我们尝试小些。

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

现在textInput只是围绕更强大的tags功能(例如tags$label和)的便捷功能tags$input。我们可以构建一个更强大的版本，textInput该版本允许我们配置元素，尤其是input节点的类：

textInput2

{

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) {}

))

小排

我们已经完成了，但是可以通过textInput3生成div标签来汇总其中一些功能。它也可以单独设置类，但我将其留给您编写。

包起来

textInput3

{

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) {}

))

出于兴趣的考虑，这是使用class的版本input-mini