使用Bootstrap网格重叠行/列

Question

问题： 试图创建此布局。我还需要它有2种形式。由于你无法嵌套表单，我一直试图使用一些样式来保持左上角col-md-4隐藏并允许它下面的那个滑动以使它看起来像是在同一行（甚至虽然他们不是。非常感谢任何帮助！

以下是我想要实现的目标：

尝试解决方案：
不使用行，偏移顶部列以在左侧创建空间以填充下面的空间：

<form id="1">
  <div class="col-md-4 col-md-offset-4">
    <div class="panel panel-default">
      <div class="panel-heading">Hello</div>
      <div class="panel-body">Content here..</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Hello</div>
      <div class="panel-body">Content here..</div>
    </div>
  </div>
</form>

<form id="2">
  <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
  </div>
  <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
  </div>
  <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
  </div>
</form>

使用行，第一列的高度为0px，也是display：none。

<div class="row">
  <form>
   <div class="col-md-4" style="height: 0px;"></div>
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
   </div>
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
   </div>
  </form>
</div>

<div class="row">
 <form>
   <div class="col-md-4">
     <div class="panel panel-default">
        <div class="panel-heading">E</div>
        <div class="panel-body">Content here..</div>
     </div>
   </div>
   <div class="col-md-4">
     <div class="panel panel-default">
       <div class="panel-heading">Title</div>
       <div class="panel-body">Content here..</div>
     </div>
   </div>
   <div class="col-md-4">
     <div class="panel panel-default">
      <div class="panel-heading">Title</div>
      <div class="panel-body">Content here..</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Title</div>
      <div class="panel-body">Content here..</div>
     </div>
  </div>
 </form>
 </div>

Answer 1

我尝试过使用jQuery Masonry插件。

刚刚使用了一个包装器来完成整个标记，并最终使用插件的小JS初始化实现了所需的功能。

$('#grid').masonry({
   columnWidth: 320,
   itemSelector: '.grid-item'
  });

请看看小提琴。虽然目的已经解决，但看起来有点难看。

注意：我没有使用过bootstrap类。

<强> Code

<强> Full screen FIDDLE

Answer 2

我想我用它来解决这个问题，你使用了许多专栏。

<div class="row">  
  <form id="form1" style="display: inline;">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
  </form>


  <form id="form2" style="display: inline;">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
  </form>
</div>