使Bootstrap输入组全宽

Question

我的问题是，input-group的宽度不是100％。

这就是目前的情况：https://jsfiddle.net/6gmzz07b/

我只想要input-group的宽度为100％，以便填充容器。

Answer 1

根据bootstrap example，您需要添加input-group-btn元素。

例如。

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <select class="form-control">
      <option selected="">seconds</option>
      <option>minutes</option>
      <option>hours</option>
      <option>days</option>
      <option>weeks</option>
    </select>
  </div>
</div>

小提琴here

Answer 2

这是小提琴，它将采用100％宽度fiddle

<div class="container">
  <div class="row">
    <div class="">
    <div class="col-xs-12">
<div class="input-group">
    <input id="ban_time" type="number" class="form-control" value="10">
    <span class="input-group-addon">
      <select class="form-control" style="width: auto">
      <option selected="">seconds</option>
      <option>minutes</option>
      <option>hours</option>
      <option>days</option>
      <option>weeks</option>
    </select>
    </span>

  </div>
    </div>
  </div>
</div>

您将删除输入样式=＆＃34; width：auto＆＃34;并且必须添加额外的span并给出input-group-addon类，并且必须将select标记嵌套在span标记内