Bootstrap - 全宽布局答案

【问题标题】：Bootstrap - Full Width LayoutBootstrap - 全宽布局
【发布时间】：2016-07-09 02:47:05
【问题描述】：

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

<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>

我正在尝试制作此列表，以使每个项目都填满整个空间的整个宽度。换句话说，我希望它看起来像这样：

div

+---------------------------------------------------------------------------+
|                                                                           |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
|                                                                           |
+---------------------------------------------------------------------------+

目前，当我这样做时，input 字段位于不同的行，我无法让每个列表项填满可用空间。我错过了什么？

【问题讨论】：

您可以将示例项目上传到某处进行测试吗？

标签： css twitter-bootstrap

【解决方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

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

  <li>
    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
      <input type="text" class="form-control col-md-8">
      <span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
    </div>
  </li>

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

您可以使用引导程序在输入的每一侧添加图标

看看这个：

bootstrap input addons

请参阅下面的字体真棒图标示例（转到引导程序 3 示例）

font awesome examples

【讨论】：

答案不完全满足问题。
那么缺少什么？添加了代码 sn-p 以证明此解决方案有效
遗憾的是，它需要复制代码才能被认为是一个好的答案......所有信息都在那里。

【解决方案2】：

您可以使用float 在您的图标上使用显式width 来实现此目的，并将overflow:hidden 添加到输入codepen

HTML

<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>

CSS

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

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

.middle {
    overflow: hidden;
}

【讨论】：

这种方法的唯一问题是每个列表项不会占用可用空间的整个宽度。

【解决方案3】：

尝试使用 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>

【讨论】：

为什么你需要一个 <form> 元素只用于一个类？
@IE5Master 你说得对，已编辑。我刚刚回答得很快:)

【解决方案4】：

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

【讨论】：