带水平滚动的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需要style属性"white-space:nowrap;"并且div里面需要style属性"display:inline-block;"

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

试试吧

Answer 2

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

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

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