具有水平滚动的引导行

Question

我正在尝试获取具有多列的行（没有最大值的动态），因此要进行水平滚动。

当我插入超过 bootstrap 大小 12 的新列时，它会将该列移至新行。 我想要的是将该列保留在同一行并获得水平滚动视图。

已经尝试过类似的东西，但没有奏效......

<div class="span11" style="overflow: auto">
    <div class="row-fluid">
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
        <div class="col-lg-3">COL1</div>
    </div>
</div>

Answer 1

row-fluid需要样式属性“white-space: nowrap;”，里面的div需要样式属性“display: inline-block;”

.row-fluid{
     white-space: nowrap;
}
.row-fluid .col-lg-3{
     display: inline-block;
}

try it

Answer 2

更大的屏幕在col- 类中也需要float: none;。

.row-fluid {
    overflow: auto;
    white-space: nowrap;
}

.row-fluid .col-lg-3 {
     display: inline-block;
     float: none;
}