如何让这些引导列堆叠在一起？
我制作了一个带有大小为6列的面板的备忘单，它们都是同一行的一部分。
我遇到的问题是我希望行中的第三列直接位于第一列的下方。
相反，它表现得恰到好处＆＃39;并形成第二个对齐的行，其中前两个元素和下面的行之间存在间隙。
如何让第三个面板与其上方的面板齐平？
5 个答案:
答案 0 :(得分：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>
答案 1 :(得分：0)
使用twitter bootstrap的网格系统是不可能的。使用css float和右上浮动元素的网格不会让第二行的列位于第一行的内联中。您可以使用javascript库来完成您想要的任务，这些库提供了一个系统，无论大小和数量如何，元素都会填充空白区域。
我猜你可以用masonry grid system满足需要。
答案 2 :(得分：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;
}
答案 3 :(得分：0)
正如@Farzad YZ所说，bootstrap不会做那种安排，但有很多基于javascript的插件可以帮助你实现目标。我建议你：http://salvattore.com/
此插件与 响应 概念完美配合
答案 4 :(得分：0)
另一个（可能很简单）选项是嵌套列和行。见Grid Nesting。您可以使用两个col-sm-6作为主列，并根据需要在每个列中添加许多col-sm-12列的新行。
请参阅示例代码段。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？