Bootstrap 3 制作浮动面板

Question

在 bootstrap 中，我有一个包含 3 个面板的网格结构，如附图所示：

<div class="row">
   <div class="col-md-3">
      <div class="panel">
         <!-- This is table panel on the left -->
      </div>
   </div>

   <div class="col-md-9">
      <div class="panel">
         <!-- Section 1 panel -->
      </div>
   </div>
<div>

<div class=" row">
   <div class="col-md-9 col-md-offset-3">
      <div class="panel">
         <!-- Section 2 panel -->
      </div>
   </div>
</div>

当然，随着 table 中行数的增加，第 3 部分面板会下降...如何使第 3 部分面板保持在第 1 部分面板下方？

Answer 1

您可以像这样将面板 3 移动到面板 1 之后：

<div class="row">
   <div class="col-md-3">
      <div class="panel">
         ...
         This is table panel on the left
         ...
      </div>
   </div>

   <div class="col-md-9">
      <div class="panel">
         ...
         Section 1 panel
        ...
      </div>
      <div class="panel">
         ...
         Section 2 panel
         ...
      </div>
   </div>
<div>

Bootstrap 3 制作浮动面板

Boostrap 3 make floating panel

css

twitter-bootstrap

twitter-bootstrap-3