3
我正在制作一个包含大小为6列的面板的小抄，它们都是同一行的一部分。我怎样才能让这些引导列堆叠在一起？
我遇到的问题是我想让行中的第三列直接位于第一列的下方。
相反，它表现得“正常”并形成第二个对齐的行，其中前两个元素和下面的行之间存在间隙。
我怎样才能得到第三面板齐平反对它上面的面板？
A
回答
0
这是不可能使用twitter bootstrap的网格系统。网格使用CSS浮动和右上浮动元素不会让第二行的列坐在第一行的内联。你想要的东西可以用JavaScript库来完成，它提供了一个系统，无论大小和数量如何，元素都可以填充空格。
我想你可以用masonry grid system来满足需要。
+0
石工网格可能不可能，但OP要求的简单布局是;请参阅http://stackoverflow.com/a/35318158/227299 –
0
随着你现在的HTML DOM结构，你想要什么是不可能的。但是，如果一点点修改DOM，则可以实现期望的结果。我在这里做了一个sample。
请看看在新旧分别代码：
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;
}
+1
你应该用文字解释修改是什么;我们必须在阅读过多的代码时才能解释你在一句话中做了什么 –
0
由于@Farzad YZ说，引导不会做这种安排，但有很多基于JavaScript的插件，这将有助于哟你实现你的目标。我建议你这样：http://salvattore.com/
这个插件完美的作品与响应概念
2
您可以列内的行，而不是行内的列。请参阅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>
+0
因此看起来这是真正实现它的唯一方法。我希望能够在页面上扔出一堆面板并让它们正确堆叠，但这是我最终做的。 –
+0
任何你没有接受答案的理由？ –
0
另一个（可能很简单）选项将嵌套您的列和行。见Grid Nesting。您可以使用两个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>相关问题
- 1. 我怎样才能让我的牌堆叠在一起？
- 2. 我怎样才能让这样的
- 3. 我怎样才能让这两个jQuery脚本一起工作？
- 4. 我怎样才能在一个div中垂直堆叠图像
- 5. 我怎样才能让这个更好
- 6. 我怎样才能让这更干？
- 7. 我怎样才能得到这些值
- 8. 我怎样才能让在线使用引导
- 9. 我怎样才能让
- 10. 我怎样才能让我的HTML控件通过引导
- 11. 我怎样才能让preg_match_all阵列
- 12. 我怎样才能让这些元素进入海誓山盟
- 13. 我怎样才能让这个动态表单起作用？
- 14. jquery：我怎样才能让一个数字元素可折叠？
- 15. 我怎样才能正确地让div并排坐在一起？
- 16. 我怎样才能让div里面引导柱可滚动
- 17. 我怎样才能让混帐或PIP引导没有错误？
- 18. 我怎样才能让我的autosuggest与mysql一起工作
- 19. 我怎样才能让jsonp和我的班级一起玩呢？
- 20. 我怎样才能把这些放在一个数组中？
- 21. 我怎样才能做到这一点：悬停图像叠加
- 22. 我怎样才能在一个列表
- 23. 我怎样才能让这些火一个接一个地开火？
- 24. 我怎样才能一起gnumakefile条件？
- 25. 我怎样才能组函数一起
- 26. 我怎样才能缩短这一点？
- 27. 我怎样才能让我的ul列表在导航元素中的一行？
- 28. 我怎样才能让在Plone
- 29. 我怎样才能让在ActiveReports中
- 30. 我怎样才能让在装配
引导不安排这样的列，但您可以使用[砌体（http://masonry.desandro.com/extras.html）来实现这一目标。请参阅此示例> http：// stackoverflow。com/questions/34953248 /砌体与侧栏引导/ 34955089＃34955089 – vanburen
为什么不让两列包含两行而不是两行包含两列？ –