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

17

Я хотел бы отобразить несколько записей в div с горизонтальной прокруткой. Я использую Twitter Bootstrap и устанавливаю строку div с каждой записью данных, представленной в виде столбца.

Если мне нужно сбросить сетку Bootstrap для этой части, тогда это нормально, я не использую ее так, как она была разработана. Я подозреваю ... Если бы я не использовал Twitter Bootstrap для этой части, тогда мой вопрос: почти идентичный Предотвращение переноса плавающих divs в новую строку . Проблема с принятым ответом на этот вопрос заключается в том, что предполагается, что вы можете рассчитать общую ширину вашего контейнера. В моем случае число элементов div является динамическим.

Я ищу чистое решение CSS / HTML. Если требуется Javascript, я использую AngularJS без jQuery.

Мой пример: Ссылка

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

    
задан Peter 05.11.2013 в 23:07
источник
  • Я думаю, что это сработает для вас! stackoverflow.com/questions/11320323/... –  PrincessBelle 06.08.2014 в 01:28

3 ответа

25

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

Fiddle: Ссылка

Я использовал неупорядоченный список со списком-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>
    
ответ дан Peter 07.11.2013 в 15:44
  • Это здорово! Работал для меня. –  Valentin Heinitz 12.06.2015 в 12:56
  • @peter, После долгого поиска, наконец, я создал горизонтальный список прокрутки с вашим предлагаемым ответом. но я не могу добавить следующую функциональность предыдущей кнопки в этом списке прокрутки. где каждая следующая / предыдущая кнопка позволяет прокручивать список. не могли бы вы помочь мне в этом? –  Jatin Patel 15.01.2016 в 15:20
15

Чтобы разрешить горизонтальную прокрутку, проверьте эту ссылку 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>'

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

    
ответ дан Mahbub 04.05.2015 в 13:56
  • удивительный, сэкономил много времени от этого :) –  Saurabh Udaniya 03.11.2015 в 11:26
  • Хорошо, работает как шарм. –  Mohanvel V 18.03.2016 в 05:18
1

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

FIDDLE

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

<script type="text/javascript">
    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();
    $('.row').css('width', totalWidth + 'px');
</script>
    
ответ дан luke 05.11.2013 в 23:31
  • Я фактически использую angularJS без jQuery ... Я добавил angularJS в свои теги. –  Peter 06.11.2013 в 01:52