bootstrap 行中的二级可滚动列表已隐藏

Question

我使用的是方案一，one true layout solution, from the Whosebug question How can I make Bootstrap columns all the same height?

当 bootstrap 行中超过 1 列可滚动时，它似乎与该行中的其他列重叠。在下面的示例中，3 个可滚动列中只有 1 个可见，而不可滚动的类似列也显示。

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;
}

Answer 1

我 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;
}

希望这对您有所帮助，如果这不是您想要实现的目标，请告诉我。

bootstrap 行中的二级可滚动列表已隐藏

Secondary scrollable lists in bootstrap row are hidden

html

css

layout

multiple-columns

twitter-bootstrap-3