引导输入组动态宽度答案

【问题标题】：bootstrap input-group dynamic width引导输入组动态宽度
【发布时间】：2016-12-06 21:16:49
【问题描述】：

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

<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 来演示。查看输入和按钮之间的所有空白。我想在输入元素旁边放置一个按钮，并设置填充。

【问题讨论】：

如果我是对的，你需要按钮占据 100% 的宽度吗？

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

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

【讨论】：

我试过这个没有运气。输入组变为每行 1 个
也许我还是不明白。是否要将所有输入组放入 1 行？
不一定。当前每个输入组的宽度相同。我不想要那个。我希望每个输入组都只有文本和“X”按钮所需的大小。我需要消除文本和“X”按钮之间的每个输入组中的额外空格。所以输入组。因此带有文本“3”的输入组不会像带有文本“And_one_more”的输入组那么宽

【解决方案2】：

在引导程序中有内置类来执行此操作。只需给出按钮类（btn-block）

【讨论】：

我应该在哪里添加它？按钮似乎不起作用

【解决方案3】：

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

【讨论】：

这似乎使输入组填满了整个 div
哦，现在我不明白你想要实现什么，你不能只用 CSS 或 boostrap 来做到这一点，你只需要这样：*.com/questions/8100770/…

【解决方案4】：

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

【讨论】：