Question

我试图在Bootstrap WELL内部排列两行数据。但是，不能让它排队？我不是那里最好的CSS人，有人可以帮我一把吗？

这是代码（需要Bootstrap和图表组件的chartjs）：

  <div class="container" style="margin-top:100px;" id="listSetions">
    <!-- FIRST INFO ROW -->
    <div class="row">
          <div class="col-md-12 well" style="background: #fff;">

            <h1>Belize</h1>

            <div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">1235</h1>
                    Total Units
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">63%</h1>
                    Occupancy Rate
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">235</h1>
                    <span style="width: 8px; height: 8px; border: 1px solid #000; background-color: #51BBF5;">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;Occupied
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">1000</h1>
                    <span style="width: 8px; height: 8px; border: 1px solid #000; background-color: #FFD1F0;">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;Unoccupied
                </div>

                <div style="text-align: center; margin-right: 20px; float: left;" ><canvas id="sectionOverview1" width="130" height="130"></canvas></div>

            </div>

            <div>

               <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">1235</h1>
                    Total Units
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">63%</h1>
                    Occupancy Rate
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">235</h1>
                    <span style="width: 8px; height: 8px; border: 1px solid #000; background-color: #51BBF5;">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;Occupied
                </div>
                <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
                    <h1 style="font-weight: bold;">1000</h1>
                    <span style="width: 8px; height: 8px; border: 1px solid #000; background-color: #FFD1F0;">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;Unoccupied
                </div>

            </div>
        </div>       
    </div>
    </div>

   <script type="text/javascript">
    var section1_data = [{ value: 200, color: "#51BBF5" }, { value: 35, color: "#FFD1F0"}];
    var section1 = document.getElementById("sectionOverview1").getContext("2d");
    var chart_section1 = new Chart(section1).Doughnut(section1_data);


    </script>

我确定预期的布局很明显。希望你们能帮帮忙！

注意：这里是link to jsfiddle。

此致

鲍勃

Answer 1

只需将class="clearfix"添加到容器div即可。它是一个使用micro clearfix的Bootstrap助手类。

<div class="clearfix">
  <div class="well" style="width:150px; float: left; text-align: center; margin-right: 20px; background: #fff;">
    <h1 style="font-weight: bold;">1235</h1>
    Total Units
  </div>
  ...
</div>

Demo

请注意，您可以通过执行以下操作来使用Bootstrap的某些网格功能：

http://jsbin.com/jiwol/3/edit

另外，当然标准说明你不应该内联...

Answer 2

试试这种方式

<div class="container" style="margin-top:100px;" id="listSetions"> 
  <!-- FIRST INFO ROW -->
  <div class="row">
    <div class="col-sm-12 well" style="background: #fff;">
      <h1>Belize</h1>
      <div class="col-sm-12 ">
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
      </div>
      <div  class="col-sm-12 ">
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
        <div class="col-sm-3">
          <div class="well" style="width:100%; text-align: center; background: #fff;">
            <h1 style="font-weight: bold;">1235</h1>
            Total Units </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

Demo

CSS布局不像我希望的那样工作

2 个答案: