使用引导程序网格重叠行/列 [英] Overlapping Rows/Columns Using Bootstrap Grid

问题描述

问题：
试图创建此布局。我也需要它有两种形式。既然你无法嵌套表单，我一直试图使用一些样式来让左上角的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>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< / form> 
  

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

 < div class =row> 
< form> 
< div class =col-md-4style =height：0px;>< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / 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>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =panel panel-default> 
< div class =panel-heading>标题< / div> 
< div class =panel-body> Content here ..< / div> 
< / div> 
< / div> 
< / form> 
< / div> 
  

解决方案

我试过使用插件。

刚刚使用了一个包装器来处理整个标记，最终实现了（b

  $（'＃grid'）。masonry（{
 columnWidth：320，
 itemSelector：'.grid-item'
}）; 
  

请看小提琴。它看起来有点丑陋，但目的已经解决。

注意：我没有使用引导类。

代码

全屏FIDDLE

Issue: Attempting to create this layout. I also need it to be in 2 forms. Since you are unable to nest forms, I have been trying to use some styling to get the top left col-md-4 to hide and allow the one underneath it to slide up to make it seem like they are on the same row (even though they aren't). Any help is greatly appreciated!

Here is what I would like to achieve:

Attempted Solutions:
Without the use of rows, off-setting the top columns to create space on the left for the one below to fill :

<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>

Using rows, giving the first column a height of 0px also a 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>

解决方案

I have tried using jQuery Masonry plugin.

Just used a wrapper for whole of your markup and finally achieved what you needed using little JS initialization for the plugin.

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

Please have a look at the fiddle. It looks a bit ugly, though the purpose is solved.

Note: I have not used bootstrap classes.

Code

Full screen FIDDLE

这篇关于使用引导程序网格重叠行/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！