Bootstrap горизонтальный скроллинг

Я использую следующий HTML-код:Bootstrap горизонтальный скроллинг

<div id="list"> 
    <div class="row"> 
     <div class="col-md-3">1</div> 
     <div class="col-md-3">2</div> 
     <div class="col-md-3">3</div> 
     <div class="col-md-3">n-times</div> 
    </div> 
</div>

Итак, мне нужно, чтобы отобразить одну строку с пейзажными столбцов по горизонтали с прокруткой в нижней части страницы.

Как это сделать?

Итак, я попытался установить фиксированный width для list контейнера и установили overflow-x: auto

источник

2017-01-31 Halama

Bootstrap поддерживает только 12 столбцов, а не бесконечность (что потребовало бы бесконечно большой таблицы стилей). Вам нужно будет переписать «width: 25%», что 'col-md-3' устанавливает, что-то исправленное, вероятно. –

Итак, что же такое решение? – Halama

Нет, способ, которым загрузочный столбец обрабатывает столбцы, имеет процентное значение, поэтому для экстраполяции одного и того же метода потребуется много и много классов. Но если вы не хотите делать это с помощью начальной загрузки, зачем использовать бутстрап? Существуют и другие сетчатые системы. –

Это okay to exceed 12 column units in a row. Он вызывает columns to wrap, но вы можете переопределить упаковку с помощью flexbox.

Bootstrap 4 включает в себя Flexbox, и вспомогательные классы, чтобы получить горизонтальную раскладку прокруткой ..

<div class="container-fluid"> 
    <div class="row flex-row flex-nowrap"> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
     <div class="col-3"> 
      .. 
     </div> 
    </div> 
</div>

Bootstrap 4 Demo:http://www.codeply.com/go/GoFQqQAFhN

Для Bootstrap 3, это может быть сделано с некоторыми CSS для flexbox .. .

row > .col-xs-3 { 
    display:flex; 
    flex: 0 0 25%; 
    max-width: 25% 
} 

.flex-nowrap { 
    -webkit-flex-wrap: nowrap!important; 
    -ms-flex-wrap: nowrap!important; 
    flex-wrap: nowrap!important; 
} 
.flex-row { 
    display:flex; 
    -webkit-box-orient: horizontal!important; 
    -webkit-box-direction: normal!important; 
    -webkit-flex-direction: row!important; 
    -ms-flex-direction: row!important; 
    flex-direction: row!important; 
}

Бутстрап 3 Демо: http://www.codeply.com/go/P13J3LuBIM

источник

2017-01-31 16:56:52 ZimSystem

Еще один способ:

CSS:

#list .row {white-space:nowrap;} 
#list .row > div {display:inline-block;float:none;}

Js для горизонтальной прокрутки:

window.addEventListener('mousewheel', function(e){ 
    e.preventDefault(); 
    var step = -100; 
    if (e.wheelDelta < 0) { 
     step *= -1; 
    } 
    var newPos = window.pageXOffset + step; 
    $('body').scrollLeft(newPos);  
})

Bootply: https://www.bootply.com/pbenard/usmX12rxgP

источник

2017-01-31 18:34:41 pbenard

Хороший подход без flexbox! – ZimSystem

ответ

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