Создание горизонтального прокручивания списка элементов с помощью столбцов Bootstrap

Я хотел бы отобразить несколько записей в 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 (я предполагаю) полоса прокрутки не активируется, а другие записи не отображаются. Если я не скрываю переполнение, тогда я могу прокрутить вниз и увидеть скрытые записи, но это не то, что я собираюсь сделать.

Ответы

Ответ 1

Мне удалось заставить его работать, используя почти щебетать Bootstrap:

Fiddle: http://jsfiddle.net/V5zWT/12/

Я использовал неупорядоченный список со списком-inline-классом. По умолчанию это все равно будет завершено, когда оно достигнет края контейнера, поэтому я изменил класс list-inline.

.list-inline {
  white-space:nowrap;
}

<div class="DocumentList">
    <ul class="list-inline">
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
    </ul>
</div>

Ответ 2

Чтобы разрешить горизонтальную прокрутку, проверьте эту ссылку github

Загрузите и включите bootstrap-horizon.css после bootstrap.css. как

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-horizon.css">

Пример кода

div class="row row-horizon">
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
</div>`

он работает для меня.

Ответ 3

Возможно, это поможет вам:

FIDDLE

Если ширина .DocumentItem исправлена, вы можете подсчитать ширину элемента прокрутки и установить его динамически.

<script type="text/javascript">
    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();
    $('.row').css('width', totalWidth + 'px');
</script>