引导程序输入组动态宽度

Question

如何使引导程序输入组输入元素的宽度动态化？ 我尝试设置宽度：自动； 但输入组似乎仍然具有设定的宽度。

<form class="col-sm-12 form-horizontal">
<div class="col-sm-6">
  <ul class="form-group list-inline list-unstyled">
    <li class="" ng-repeat="item in items">
      <div class="input-group list-item">
        <input type="text" readonly="" class="form-control" value="{{item}}" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="removeExpedition(item)">
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
      </div>
    </li>
  </ul>
</div>
</form>

和CSS：

.list-item>.input-group-btn {
    width: auto;
}

这里是一个plunker证明。 查看输入和按钮之间的所有空白。 我想将按钮设置在输入元素旁边，并设置填充。

Answer 1

尝试这个：

.list-inline > li, .input-group {
    width: 100%;
}

Answer 2

在bootstrap中有一个内置的类可以做到这一点。 只需给出按钮类（ btn-block ）

Answer 3

添加到li元素样式display: block并添加到div.input-group类btn-block就是全部

Answer 4

好的，所以我能够通过使用btn-group而不是input-group来做到这一点。 输入仅用于显示值，因此没有必要。 缺省情况下，btn-group仅包含其所包含的文本。