带水平滚动的Bootstrap行

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

较大的屏幕在float: none;课程中也需要col-。

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

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