twitter-bootstrap 全宽列表项网格引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22054747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
full width list items grid bootstrap 3
提问by agis
I'm using the latest version of Twitter Bootstrap.
我正在使用最新版本的Twitter Bootstrap。
I have the following markup:
我有以下标记：
<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>
And the output is not quite what I'm expecting, it adds a horizontal scrollbar and also the spacing is not equal on on the first item and last item.
并且输出不是我所期望的，它添加了一个水平滚动条，并且第一项和最后一项的间距也不相等。
Here is a screenshot:
这是一个屏幕截图：
I want to have this output:
我想要这个输出：
Is it possible with the actual grid system to remove the gutters between list items and make them fill the width of the browser ?
是否可以使用实际的网格系统删除列表项之间的间距并使它们填充浏览器的宽度？
采纳答案by Christina
There's no such thing as a ul.grid inside a .row it won't clear and the ul has margins and padding on it. Do the following:
.row 中没有 ul.grid 这样的东西，它不会清除，并且 ul 上有边距和填充。请执行下列操作：
http://jsbin.com/getof/1/edit
http://jsbin.com/getof/1/edit
For a standard set up with gutter:
对于带有装订线的标准设置：
<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>
For no gutter do the following:
对于没有天沟，请执行以下操作：
<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>
New CSS:
新的 CSS：
.row.flush-col > [class*="col-"] {padding:0;}
.img-fluid {width:100%;}
回答by jakealbaugh
You can change the gutter if you are using LESS. You will have to make it a column from inside your styles instead of adding the colclass to the element.
如果您使用的是 LESS，则可以更改装订线。您必须将其从样式内部设置为一列，而不是将col类添加到元素中。
See official steps with LESS mixins in the documentation: http://getbootstrap.com/css/#grid-less
请参阅文档中使用 LESS mixins 的官方步骤：http: //getbootstrap.com/css/#grid-less
