Bootstrap网格中断不按预期工作
我在引导网格系统中遇到了一些问题。 
正如您在第二行中看到的那样，框位于前一个元素上。这导致一些看起来不太好看的行为。我如何强制第4个元素定位在前一行中最高的元素上？
<div class="row ">
<div class="col-md-8" border="1">
<div class="row ">
<div class="col-md-12 f42_Col f42_MainWrapper" >
<button style="float:right;margin-top:10px;" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<h5>test</h5>
<br></br>
<!-- gets repeated -->
<div class="f42_ModuleWrapper">
<div class="f42_ConfigWrapper">
<div class="f42_ConfigButtonWrapper">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button style="margin:5px;" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 f42_Col f42_MainWrapper">
<h5>test</h5>
</div>
<div class="col-md-4 f42_Col f42_MainWrapper" >
<h5>test test</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 f42_Col f42_MainWrapper">
<h5>TEBS</h5>
</div>
</div>
</div>
</div>
</div>
.f42_MainWrapper{
border-radius: 15px;
border:white medium solid;
background-color:#C4C4C4;
}
.f42_ModuleWrapper {
float: left;
}
.f42_ConfigWrapper {
display: table;
margin:20px;
padding:5px;
width:1px;
height:1px;
background-color:black;
border-radius: 10px;
}
.f42_ArticleWrapper{
height:50px;
padding:4px;
margin:4px;
width:200px;
overflow: hidden;
background-color:white;
border-radius: 5px;
}
.f42_ConfigButtonWrapper{
text-align: right;
}
3 个答案:
答案 0 :(得分：0)
我也在努力解决这个问题。我提出的两个选项是：
- 将面板设置为固定高度
- 使用列
如果你愿意牺牲液体高度，第一种方法是最简单的。这对我来说有50％的时间可以使用，而且我可以随时使用。
使用列而不是行（pinterest样式）使您可以使用流体面板，但会使处理订单变得更加困难。以下是列方法的示例：
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="f42_ModuleWrapper">
<div class="f42_ConfigWrapper">
<div class="f42_ConfigButtonWrapper">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button style="margin:5px;" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="f42_ModuleWrapper">
<div class="f42_ConfigWrapper">
<div class="f42_ConfigButtonWrapper">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button style="margin:5px;" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="f42_ModuleWrapper">
<div class="f42_ConfigWrapper">
<div class="f42_ConfigButtonWrapper">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button style="margin:5px;" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="f42_ModuleWrapper">
<div class="f42_ConfigWrapper">
<div class="f42_ConfigButtonWrapper">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button style="margin:5px;" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
<div class="f42_ArticleWrapper">
112312111212123113 414141234235252345363636dfdffdfdg
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
阅读ForrestLyman的回答激发了我解决这个问题的想法（我在我的网站上遇到了同样的问题）。
如果你知道它将是3列宽，那么也许可以做3个循环，然后在每个循环中你可以将计数器增加3.所以第一个循环将变为1,4,7等等。第二个循环将变为2 ，5,8等。第三循环将进入3,6,9,12等
所以，这是你在代码中可以做的：
<div class="visible-xs">
<div class="col-xs-6">
<!-- Use two different loops here, going 1, 3, 5, 7, etc -->
<!-- Second loop going 2, 4, 6, 8, etc -->
</div>
</div>
<div class="visible-sm">
<div class="col-sm-4">
<!-- Use three different loops here, going 1, 4, 7, 10, etc -->
<!-- Second loop going 2, 5, 8, 11, etc -->
<!-- Third loop going 3, 6, 9, 12, etc -->
</div>
</div>
<div class="visible-md">
<div class="col-md-3">
<!-- Use four different loops here, going 1, 5, 9, 13, etc -->
<!-- Second loop going 2, 6, 10, 14, etc -->
<!-- Third loop going 3, 7, 11, 15, etc -->
<!-- Fourth loop going 4, 8, 12, 16, etc -->
</div>
</div>
<div class="visible-lg">
<div class="col-lg-2">
<!-- Use six different loops here, going 1, 7, 13, 19, etc -->
<!-- Second loop going 2, 8, 14, 20, etc -->
<!-- Third loop going 3, 9, 15, 21, etc -->
<!-- Fourth loop going 4, 10, 16, 22, etc -->
<!-- Fifth loop going 5, 11, 17, 23, etc -->
<!-- Sixth loop going 6, 12, 18, 24, etc -->
</div>
</div>
答案 2 :(得分：0)
我想出了一个jquery的答案，如果你能胜任它，它会很有效。这里演示：http://jsfiddle.net/swm53ran/114/
此代码查找最低高度的列，然后将新部分附加到该列。它作为一个循环运行，因为不同高度的不同部分被添加到列中，它重新检查所有列的当前高度并将它们相互比较以找到放置新内容的最短列。这样，尽管新内容的高度可变，但您将在所有三列中获得最均匀的列长度。希望这有帮助！
$(document).ready(function() {
var first = $('.first');
var second = $('.second');
var third = $('.third');
$('.toBePlaced > .section').each(function () {
var height = $(this).height();
var lowest = first;
if (first.height() < lowest.height()) { lowest = first; }
if (second.height() < lowest.height()) { lowest = second; }
if (third.height() < lowest.height()) { lowest = third; }
$(this).appendTo(lowest);
});
});
<div class="container">
<div class="col-xs-4 first">
<div class="section">
I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- first -->
<div class="col-xs-4 second">
<div class="section">
I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- second -->
<div class="col-xs-4 third">
<div class="section">
I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div> <!-- third -->
</div> <!-- container -->
<div class="toBePlaced col-xs-4">
<div class="section">
I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？