2014-10-09 4 views
13

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> 

ответ

21

рядного жидкости нужен атрибут стиля «белого пространства: Nowrap;» и дивы внутри нужен атрибут стиля " дисплей: встроенный блок; "

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

try it

5

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

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

.row-fluid .col-lg-3 { 
    display: inline-block; 
    float: none; 
} 
Смежные вопросы