css - Bootstrap 3 制作 float 面板

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>

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

Answer 1

您可以像这样在面板 1 之后移动面板 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 class="panel">
         ...
         Section 2 panel
         ...
      </div>
   </div>
<div>