Question

我使用Bootstrap 3进行网格布局，行包含不同数量的列。我对网格行为的期望是，当父容器宽度发生变化时，列项之间的边距会发生变化，从而导致一组列占据容器的整个宽度。

例如，采用以下简化代码段：

<div class="container">
  <div class="row">
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
  </div>      
  <div class="row">
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
  </div>
</div>

这将提供2行 - 具有6列的顶行将正确填充父容器的完整可用宽度。底行有3列，在最后一列的右边有一个大约20px的额外边距。

我是否正确期望连续最后一列的最右边始终与其父容器的最右边齐平？如果是这样，我做错了什么，如果没有，实际的预期行为是什么，以及如何确保我的所有列在两边都很好地对齐？

您可以在http://www.bootply.com/anQ8pvgmJM

上查看此问题的示例

Answer 1

问题来自你的图片，而不是cols，如果你将img { width: 100% ; }添加到你的CSS，你会得到预期的行为。

Answer 2

它很好地对齐。数学错了。见这里：

http://www.bootply.com/9crxEwGQGa

在这里：

http://getbootstrap.com/css/#grid

网格列不填充父容器

2 个答案: