web-dev-qa-db-ja.com

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>
jqueryhtmlcsshtml5twitter-bootstrap
13
Nacho

row-fluidにはスタイル属性 "white-space：nowrap;"が必要で、内部のdivにはスタイル属性 "display：inline-block;"が必要です

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

試してみてください

21
Erfan

大きな画面にはfloat: none; in col- クラス。

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

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