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小提琴，但你不需要在CSS中向左浮动，无法让JS小提琴拉动引导程序。 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>

AND CSS

    div.col-md-4 {
    border: 1px solid #333;
    width: 200px;
    background-color: red;;

}

Bootstrap网格布局

1 个答案: