Question

我正在使用解决方案1，one true layout解决方案，来自stackoverflow问题How can I make Bootstrap columns all the same height?

当引导行中的多于一列可滚动时，它似乎与该行中的其他列重叠。在下面的示例中，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;
}

希望这会有所帮助，如果这不是你想要达到的目的，请告诉我。

隐藏引导行中的辅助可滚动列表

1 个答案: