css - Bootstrap 网格布局

Question

我的 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>

Answer 1

如何使用 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;;