我正在使用来自stackoverflow问题one true layout的解决方案1，How can I make Bootstrap columns all the same height?解决方案
当引导行中的多于一列可滚动时，它似乎会与该行中的其他列重叠。在下面的示例中，3个可滚动列中只有1个可见，而类似的不可滚动列也显示。
CodePen
html
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="row sameHeightRow">
<div class="col-xs-8 sameHeightCol" style="background-color: grey">
test <br><br><br><br><br><br><br><br><br>
</div>
<div class="col-xs-1 sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">2</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">3</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
<div class="col-xs-1 scrollable sameHeightCol" style="background-color: yellow">
<ul class="list-group">
<li class="list-group-item">4</li>
<li class="list-group-item">b</li>
<li class="list-group-item">c</li>
<li class="list-group-item">d</li>
</ul>
</div>
</div>
</body>
的CSS
.scrollable{
max-height: 200px;
overflow:auto;
}
.sameHeightRow {
overflow: hidden;
}
.sameHeightCol {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
最佳答案
我已经forked your pen。
我猜想Bootstrap样式在某种程度上不能与您的.scrollable和.sameHeightCol样式配合使用，所以我所做的就是将它们移动到<ul>，如下所示：
<div class="col-xs-1">
<ul class="list-group scrollable sameHeightCol">
<!-- <li> -->
</ul>
</div>
这解决了重叠问题，但是4列过高，因此我将它们包裹在另一个div中，并给该div设置了高度。
<div class="col-xs-4 columnContainer">
<!-- Original col-xs-1 divs now become col-xs-3 -->
</div>
.columnContainer {
height: 200px;
}
希望这会有所帮助，并让我知道这是否不是您要实现的目标。
关于html - 引导行中的辅助可滚动列表被隐藏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35966242/