我正在制作一个抄袭表，其中的面板都包裹在大小为6列的列中，它们都是同一行的一部分。
我遇到的问题是，我希望行中的第三列直接位于第一列下方。
但实际上，它会“正确地”形成第二个对齐的行，在第一行的前两个元素和下面的行之间有一个间隙。
我遇到的问题是，我希望行中的第三列直接位于第一列下方。
但实际上，它会“正确地”形成第二个对齐的行，在第一行的前两个元素和下面的行之间有一个间隙。
如何使这些Bootstrap列堆叠在一起？
5
- Matthew Rathbone
2
Bootstrap不会像这样排列列，但是您可以使用Masonry来实现这一点。请参见此示例> http://stackoverflow.com/questions/34953248/masonry-with-sidebar-bootstrap/34955089#34955089 - vanburen
为什么不制作两列包含两行，而不是两行包含两列呢？ - Ruan Mendes
5个回答
5
您可以将行放在列内，而不是将列放在行内。请参见https://jsfiddle.net/mendesjuan/89t1g002/1/
<div class="row">
<div class="col-md-6">
<div class="panel">Content </div>
<div class="panel">Content </div>
</div>
<div class="col-md-6">
<div class="panel">Content</div>
<div class="panel">Content</div>
</div>
</div>
- Ruan Mendes
1
所以看起来这确实是唯一的方法。我希望只需将一堆面板放在页面上并使它们正确堆叠，但最终采用了这种方法。 - Matthew Rathbone
0
根据您当前的HTML DOM结构，无法实现您想要的效果。但是，如果稍微修改一下DOM，就可以实现所需的结果。我在这里制作了一个示例。
请查看旧代码和新代码：
HTML：
<div class="container">
<div class="row">
<h4>
OLD
</h4>
<div id="div1" class="cols col-xs-6">
<h2>
Div 1
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div2" class="cols col-xs-6">
<h2>
Div 2
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div3" class="cols col-xs-6">
<h2>
Div 3
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div id="div4" class="cols col-xs-6">
<h2>
Div 4
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</div>
<div class="sep">
</div>
<div class="container">
<div class="row">
<h4>
NEW
</h4>
<div class="cols col-xs-6">
<h2>
Div 1
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 2
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 3
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
<div class="cols col-xs-6">
<h2>
Div 4
</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
</div>
CSS：
.cols {
border: 1px solid red;
}
.sep{
border: 2px solid;
margin: 20px 0;
}
- Shashank
1
2你应该用语言解释修改是什么；我们不得不阅读大量代码，而你只需用一句话解释你做了什么。 - Ruan Mendes
0
使用 Twitter Bootstrap 的网格系统无法实现此功能。该网格使用 CSS 浮动，右上浮动的元素将不允许第二行的列与第一行的列在同一行内对齐。您想要的可以使用提供了一个系统，使元素填充空白空间的 JavaScript 库来完成，无论大小和数量如何。
我猜您可以使用 masonry grid system 来满足需求。
- Farzad Yousefzadeh
1
砌体网格可能不可行，但OP所要求的简单布局是可以实现的；请参见https://dev59.com/65Pfa4cB1Zd3GeqPJOFJ#35318158。 - Ruan Mendes
0
正如@Farzad YZ所说，Bootstrap不支持这种排列方式，但是有许多基于JavaScript的插件可以帮助您实现目标。我向您推荐这个：http://salvattore.com/。
这个插件与响应式概念完美配合。
这个插件与响应式概念完美配合。
- fablexis
0
另一个（可能简单）的选项是嵌套您的列和行。请参见网格嵌套。您可以使用两个col-sm-6作为主列，并在每个列中放置任意数量的新行，其中包含所需数量的col-sm-12列。
请参见示例片段。
body {
padding-top: 50px;
}
code {
border-radius: 3px
}
.bs-callout+.bs-callout {
margin-top: -5px
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<section class="col-sm-6">
<div class="row">
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>ONE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetti.</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>TWO</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>List files matching a pattern</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>THREE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</section>
<section class="col-sm-6">
<div class="row">
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FOUR</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>FIVE</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy tex.</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Lorem Ipsum is simply dummy text of <b>SIX</b>
</div>
<div class="panel-body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<table class="table table-striped">
<tbody>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
<tr>
<td><code>To switch directories, type</code>
</td>
<td>To switch directories, type</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</section>
</div>
</div>- vanburen
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接