我的 CSS 没有选取不同的列。它们堆叠在一起。我希望它们每个都跨越同一行的 4 列。
<div class="container">
<div class="row">
<div class="col-md-4" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
最佳答案
如何使用 float 。您可以将作为左拉辅助类的 float 应用到 div.col-md-4,然后它们就不会相互堆叠。
更新了 JS fiddle ,但您不需要在 CSS 中向左浮动,无法让 JS fiddle 拉 Bootstrap 的东西。 http://jsfiddle.net/4xEPr/7/
<div class="container">
<div class="row">
<div class="col-md-4 pull-left" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
和 CSS
div.col-md-4 {
border: 1px solid #333;
width: 200px;
background-color: red;;
关于css - Bootstrap 网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23118090/