Bootstrap сетка - горизонтальная полоса прокрутки

Я пытаюсь создать страницу, где бутстраповские свитки любые предметы по горизонтали, а не вертикально пример:Bootstrap сетка - горизонтальная полоса прокрутки

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-4" style="background-color:red;">item1</div> 
    <div class="col-sm-4" style="background-color:blue;">item2</div> 
    <div class="col-sm-4" style="background-color:green;">item3</div> 
    <div class="col-sm-4" style="background-color:yellow;">item4</div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4" style="background-color:red;">item5</div> 
    <div class="col-sm-4" style="background-color:blue;">item6</div> 
    <div class="col-sm-4" style="background-color:green;">item7</div> 
    <div class="col-sm-4" style="background-color:yellow;">item8</div> 
    </div> 
</div> 
</body> 
</html>

В приведенном выше примере я пытаюсь иметь «item4» & «ст.8» видимый при прокрутке только влево/вправо.

Однако бутстраповский расположить эти элементы ниже «item1» & «Item5» соответственно

источник

2015-01-22 Ryan

Вы должны изменить нумерацию ваших дивы.

Размер сетки Bootstrap равен 12, поэтому col-sm-4 отображает максимум 3 на линию (4 + 4 + 4 = 12).

Вам необходимо использовать col-sm-3, который содержит 25% контейнера, и позволяет отображать 4 на линию (3 + 3 + 3 + 3 = 12).

В резюме, попробуйте следующее:

<div class="row"> 
    <div class="col-sm-3" style="background-color:red;">item1</div> 
    <div class="col-sm-3" style="background-color:blue;">item2</div> 
    <div class="col-sm-3" style="background-color:green;">item3</div> 
    <div class="col-sm-3" style="background-color:yellow;">item4</div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-3" style="background-color:red;">item5</div> 
    <div class="col-sm-3" style="background-color:blue;">item6</div> 
    <div class="col-sm-3" style="background-color:green;">item7</div> 
    <div class="col-sm-3" style="background-color:yellow;">item8</div> 
    </div>

Вот Bootstrap сетки объяснение:

http://getbootstrap.com/css/#grid

источник

2015-01-22 17:01:05

Может быть, я неправильно понял, но если вы хотите, чтобы 'скрыть' пункты 4 и 8, вы» Возможно, вам придется использовать «таблицу» Bootstrap, иначе с javascript :) –

Использование вышеизложенного не приведет к переполнению. Я искал способ сделать это с помощью макета сетки. Возможно, стол - это способ сделать это – Ryan

Bootstrap сетка - горизонтальная полоса прокрутки

ответ

Смежные вопросы