Bootstrap中有多个水平输入组

Question

如何在Bootstrap中实现这一目标？

标签，后跟输入组，后跟一个glyphicon，后跟一个输入组？

Answer 1

您可以使用这样的内联表单来执行此操作：

  <form class="form-inline">
    <div class="form-group">
      <label>Temporal Extent</label>
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
        </span>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
        </span>
        <input type="text" class="form-control">
      </div>
    </div>
  </form>

修改

对于输入组插件而不是按钮：

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
  <input type="text" class="form-control">
</div>

Demo