我正在 Bootstrap 中构建一个表单,我希望在同一行和同一列中有 2 个输入,一个相邻。
我尝试使用 class input-group
,我可以使用它向输入添加按钮和标签,但是当我将 2 个输入放入一个输入时,input-group
第二个输入低于第一个,我希望它位于第一个输入旁边并粘合,就像input-group-addon
.
怎样才能做到这一点?尽可能使用 Bootstrap 自己的类。
这是我到目前为止所拥有的
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="">Nro. remito</label>
<div class="input-group">
<input name="remitosucursal" id="remitosucursal" type="text" required class="form-control">
<input name="remitonumero" id="remitonumero" type="text" required class="form-control">
</div>
</div>
</div>
一种选择是
input-group-addon
在字段之间添加 a 并让 Bootstrap 处理样式。如果您不想添加
input-group-addon
,另一种选择是创建自己的样式(尽管我不知道您在问题中所说的是否是您想要的)。这是一个例子:就个人而言,我发现考虑到十二点的列空间更容易容纳,
一种选择是使用内联表单。
我修改了您在问题中包含的示例以使用
Inline forms
(在预览中,您将看到它出现在单个列中,因为它是 的默认值Extra Small
,但如果您希望字段水平排列,即使在那个尺寸):我给你留下了这个选择,希望它对你有用:
如果文本框彼此相邻,它们将被放置在同一行,但不在同一列
你会注意到我把每一个都
input
放在一个div
不同的指示 acol-*-6
中,我定义了一个 6 来指定 12grid system
列bootstrap
在前面的示例中,我提出了对我来说最好的解决方案。
输入组 - 两个彼此靠近的输入
但是确实可以使用
input-group-addon
它在控件旁边放置文本,但是我看到这比放置一些文本(这就是为什么它应用在 a 中span
)而不是对齐另一个控件也可以帮助您并且更短的是:
能够将两个输入放在同一行