Я хотел бы отобразить несколько записей в div с горизонтальной прокруткой. Я использую Twitter Bootstrap и устанавливаю строку div с каждой записью данных, представленной в виде столбца.
Если мне нужно сбросить сетку Bootstrap для этой части, тогда это нормально, я не использую ее так, как она была разработана. Я подозреваю... Если бы я не использовал Twitter Bootstrap для этой части, тогда мой вопрос: почти идентичный Предотвращать всплывающие divs от упаковки до новой строки. Проблема с принятым ответом на этот вопрос заключается в том, что предполагается, что вы можете рассчитать общую ширину вашего контейнера. В моем случае количество элементов div является динамическим.
Я ищу чистое решение CSS/HTML. Если требуется Javascript, я использую AngularJS без jQuery.
Мой пример: http://jsfiddle.net/V5zWT/2/
CSS
.DocumentList
{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.DocumentItem
{
border:1px solid black;
padding:0;
height:200px;
}
HTML
<div class="DocumentList">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
</div>
</div>
Как видно из скрипки, отображаются только первые 4 записи. Из-за CSS float (я предполагаю) полоса прокрутки не активируется, а другие записи не отображаются. Если я не скрываю переполнение, тогда я могу прокрутить вниз и увидеть скрытые записи, но это не то, что я собираюсь сделать.