Строка Bootstrap с горизонтальной прокруткой

Im пытается получить строку с несколькими столбцами (динамическая без max) и, следовательно, для получения горизонтальной прокрутки.

Когда я вставляю новый столбец, который превышает размер загрузочного буфера 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>

Ответ 1

row-fluid нужен атрибут стиля "white-space: nowrap", а для внутри div нужно атрибут стиля "display: inline-block;"

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

попробуйте

Ответ 2

Более крупный экран также понадобится float: none; в классах col-.

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

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