Css 引导-全宽度布局

我有一个使用引导的应用程序。在这个应用程序中，我有一个可以重新排序的项目列表。目前，我的列表如下所示：

<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>

  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>

  <li>
    <i class="fa fa-reorder"></i>
    <div class="form-group">
      <input type="text" class="form-control col-md-8">
    </div>
    <i class="fa fa-times-circle"></i>
  </li>
</ul>
</div>

---

此时，当我这样做时，我会在另一行获得

input

字段，而我无法让每个列表项填满可用空间。我缺少什么？

尝试使用bootrstrap内联表单

<li class="form-inline">     
   <div class="form-group">
    <i class="fa fa-reorder"></i>
    <input type="text" class="form-control col-md-8">
    <i class="fa fa-times-circle"></i>
   </div>
</li>

在样式中尝试col-xs-12和width属性

您可以使用图标上带有显式

宽度的
float
来实现这一点，并将
溢出：隐藏
添加到输入中

HTML

你能把你的样本项目上传到某个地方进行测试吗？答案并不能完全满足这个问题。那么缺少什么呢？添加了一个代码片段以证明此解决方案有效。它需要复制代码才能被认为是一个好的答案。。。所有信息都在那里。这种方法唯一的问题是，每个列表项并没有占据可用空间的整个宽度。为什么只为一个类需要一个
元素？@IE5Master your right，edited。我只是很快地回答：）
<li class="form-inline">     
   <div class="form-group">
    <i class="fa fa-reorder"></i>
    <input type="text" class="form-control col-md-8">
    <i class="fa fa-times-circle"></i>
   </div>
</li>

<ul id="choices" class="list-unstyled">
  <li>
    <i class="fa fa-reorder left"></i>
    <i class="fa fa-times-circle right"></i>
    <div class="middle"><input type="text" class="form-control"></div>
  </li>
</ul>

.left {
    width: 50px;
    float: left;
}

.right {
    width: 50px;
    float: right;
}

.middle {
    overflow: hidden;
}