Question

我有一个使用Bootstrap 3的应用程序。我正在尝试布局一组输入控件。完成所有操作后，我希望我的控件看起来如下所示：

approximately [drop down  ][mi.]
from          [value1], [value2]
              p1        p2

[mi.]应该是input-group-addon。 [value1]和[value2]应该是文本框。最后，p1和p2只是样式提示。目前，我有以下内容：

<div class="input-group input-group-sm">
  <div class="input-group-addon">approximately&nbsp;</div>
  <select class="form-control input-sm" type="text">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <div class="input-group-addon">mi.</div>
</div>

<div class="input-group">
  <div class="input-group-addon">from&nbsp;</div>
  <input class="form-control input-sm" type="text" value="" />
  <div class="input-group-addon">,</div>
  <input class="form-control input-sm" type="text" value="" />
</div>

<div class="input-group">
  <div class="hint">p1</div>
  <div class="hint">p2</div>
</div>

但这种方法不起作用。原因是因为布局是基于行的。虽然输入控件填充了我想要的剩余空间，但它们并不是彼此对齐的。与此同时，当我使用自举网格时，间距完全没有了。有没有办法创建我正在使用Bootstrap拍摄的布局？如果是这样，怎么样？

使用Bootstrap的布局输入字段

0 个答案: