自举-全宽布局

debugcn 发表于 Dev

一些用户

我有一个使用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>

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

股利

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

此刻，当我这样做时，我将input字段移到另一行，并且无法获取每个列表项来填充可用空间。我想念什么？

鲁宾·皮罗特（Ruben Pirotte）

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

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

看看这个：

引导输入插件

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

字体很棒的例子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。