全宽列表项网格引导3

Question

我正在使用最新版本的Twitter Bootstrap。

我有以下标记：

<div class="container-fluid">
  <div class="row">
    <ul id="grid">
      <li class="mix dogs col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li>
      <li class="mix cats col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li>
      <li class="mix krakens col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li>
      <li class="mix dogs cats col-sm-3"><img src="http://placehold.it/300x200" alt="..."></li>
    </ul>
  </div>
</div>

并且输出不是我所期望的，它添加了一个水平滚动条，并且第一个项目和最后一个项目的间距也不相等。

以下是截图：

我想要这个输出：

是否可以使用实际网格系统删除列表项之间的装订线并使它们填满浏览器的宽度？

Answer 1

在.row中没有ul.grid这样的东西它不会被清除，并且ul上有边距和填充。执行以下操作：

http://jsbin.com/getof/1/edit

对于使用装订线的标准设置：

<div class="container-fluid">
  <div class="row">
      <div class="mix dogs col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix cats col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix krakens col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix dogs cats col-sm-3"><img class="img-responsive" src="http://placehold.it/300x200" alt="..."></div>
  </div>
</div>  

如果没有排水沟，请执行以下操作：

<div class="container-fluid">
  <div class="row flush-col">
      <div class="mix dogs col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix cats col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix krakens col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div>
      <div class="mix dogs cats col-sm-3"><img class="img-fluid" src="http://placehold.it/300x200" alt="..."></div>
  </div>
</div>    

新CSS：

.row.flush-col > [class*="col-"] {padding:0;}

.img-fluid {width:100%;}

Answer 2

如果您使用的是LESS，则可以更改装订线。您必须从样式内部创建一个列，而不是将col类添加到元素中。

请参阅文档中的LESS mixins的官方步骤：http://getbootstrap.com/css/#grid-less