引导网格未按预期工作[重复]
Posted
技术标签:
【中文标题】引导网格未按预期工作[重复]【英文标题】：bootstrap grid not working as expected [duplicate] 【发布时间】：2014-06-23 16:56:20 【问题描述】：我使用 bootstrap 3 创建了一个网格设计，但 div 没有正确堆叠
这是我得到的
看第二行。第一个和第三个低点工作正常，但看起来第二行受第一行内容的影响。如何解决这个问题？
这是我的 html
<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>
<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>
在 css 中我被告知这样做-：
.row-fluid [class*="span"]:first-child
margin-left: 0;
【问题讨论】：
网格的每一“行”都需要包裹在<div class="row">中，否则浮动不会被清除（列是浮动的）。
我在截图中看到了13张图片，但只有<img>标签。
使用 javascript 填充数据，这是 2 个 div 的示例。我只是使用javascript一个接一个地堆叠每个具有该示例数据的div。
仅供参考 - .span*:first-child 是引导程序 2 的包装问题，它不适用于引导程序 3，因为 BS3 使用不同的盒子模型。但是，由于 BS3 不再使用“span”，这应该不会对您的页面产生任何影响。
【参考方案1】：
查看有问题的代码，问题似乎在于列的高度不一致。它包裹在第 6 个元素下方，位于第 5 个元素的右侧，比第 6 个元素高。如果您将正方形设置为特定高度，那么它将作为适当的网格工作，并且仍然允许您使其具有响应性，以便您的行可以针对不同的分辨率具有不同的宽度。 如果您使用 clearfixes，那么您的行总是必须以相同的计数结束。
根据一些答案，似乎对 class='row' 的需求可能有些混淆。在 Bootstrap 2 中，您确实需要为每一行添加新行，因为 :first-child 的边距与其余跨度不同。但是，Boostrap 3 使用：
box-sizing:border-box
这允许它为每个 col-* 设置相同的填充。因此，正如您从以下 html 中看到的那样，不存在列换行问题：
<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' />
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
<div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'> </div></div>
</div>
</div>
</body>
</html>
因此，您不需要一行来包装每组 6 个 col-*。如果你这样做了，那么响应式功能将不起作用。例如。您可以使用col-md-2 col-sm-3 col-xs-6，并且 col-xs-6 每 2 个条目需要一个新行， col-sm 每 4 个条目需要一个新行， col-md 每 6 个条目需要一个新行。显然，我们无法更改 HTML 的屏幕尺寸...所以，当您希望动态数据包含在网格中时，您不想为每个分组使用一行。有意义吗？
但是，您确实需要一个带有负数 margin-left:-20px; 和 margin-right:-20px; 的 ROW 来抵消容器的 20px 填充...否则您将遇到包装问题，您的 col-* 宽度最终比数量大 40px .
无论如何，我只是想为那些碰巧在这个页面上结束并开始认为他们必须像旧的 BS2 一样用行包装每个组的人做这个澄清。
【讨论】：
在我的情况下，之前无法设置高度，因为它不可预测。 @user3282115，是的，这主要是个人喜好。当我构建媒体列表时，我希望所有内容都具有相同的大小。所以，在同样的情况下，我可能会强制设置一个静态的“允许的最大高度”，隐藏溢出，并且很可能在框周围放置一个几乎不可见的边框以使所有内容对称。【参考方案2】：也许添加带有“行”类的 div。
<div class="row">
<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
</div>
</div>
或者也尝试只使用“col-md-#”类并让rest默认。
<div class="row">
<div class="col-md-2 ongblock" id="songblock">
</div>
</div>
【讨论】：
【参考方案3】：您遇到浮动结算问题。在第 6 列 div 之后添加：
<div class="clearfix visible-md"></div>
如果您在其他视口上遇到同样的问题，您可以添加更多可见的实例：
<div class="clearfix visible-sm visible-md"></div>
更多信息：响应列重置：http://getbootstrap.com/css/#grid
【讨论】：
工作得很好，非常感谢。 是的，这需要在 col-sm 的第 4 个条目之后和 col-md 的第 6 个条目之后进行 clearfix。似乎设置高度会是一个更好的方法，除非高度是如此不可预测，以至于这使得这不可行......因为在不同的地方为不同的分辨率放置 clearfixes 会很快变得混乱，恕我直言以上是关于引导网格未按预期工作[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Spring Security：antMatcher 的序列未按预期工作 [重复]
Bootstrap 4 - col垂直对齐未按预期工作[重复]