TW Bootstrap: Как переполнить столбцы

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

scrollable columns in a single row in twitter bootstrap

Как видите, строка является внешним блоком (с отступами). Внутри него есть колонки, в каждой из которых естьspan* класс, такой какspan3, А поскольку все столбцы не помещаются в строке, полоса прокрутки находится внизу.

Вот то, что я пытался сделать (с помощью встроенного CSS) и до сих пор не повезло.

<div class="row">

<!-- the parent element which will have scrollbar -->
<div class="span12" style="white-space: nowrap; overflow-x: auto;">

<div class="row">

<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
...

<div>

</div>

</div>

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

Спасибо.

Ответы на вопрос(2)

   div.h-scrollable {
overflow-x: auto;
white-space: nowrap; 
}



 div.h-scrollable [class*="col"] {
    display: inline-block;
    float: none;
    white-space: normal;
    vertical-align: top;
  }

    <div class="h-scrollable container-fluid ">
    <div class="row">
        <div class="col-xs-1">
            <label>9:00am</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <label>9:00am</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>BBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahBlah blah blah blah blah blahah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
        <div class="col-xs-6">
            <label>Blah blah blah blah blah blah</label>
        </div>
    </div>
</div>
 23 авг. 2016 г., 20:27
Вы можете предоставить скрипку? Как правило, помогает обзор
Решение Вопроса

Updated

Я думаю, вы просто пропустилиfloat: none; : float силdisplay: block;.

Живая демоверсия (jsfiddle)

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>
div.myClass {
    overflow-x: auto;
    white-space: nowrap;
}
div.myClass [class*="col"], /* TWBS v3 */
div.myClass [class*="span"] {  /* TWBS v2 */
    display: inline-block;
    float: none; /* Very important */
}

В любом случае, это не потому, что вы можете делать это так, как должны. Есть такие вещи, каккаруселей что может достичь такого рода эффектов.

по моему мнениюa web page is originally meant to be horizontally scrolled тогда как JavaScript может делать все что угодно.

 01 авг. 2012 г., 09:36
@Sherbrow Можно ли использовать горизонтальную прокрутку для реагирования на жесты пользователя, а не управлять полосой прокрутки, также я не хочу, чтобы полоса прокрутки была видна
 12 мар. 2013 г., 21:03
Я пытался решить ту же проблему, и это сработало как очарование ... спасибо.
 miki72504 июл. 2012 г., 22:05
Я попробую. Зачемpre тег?
 miki72504 июл. 2012 г., 23:03
Thanx. Работает отлично! Я сделал скрипку с решением. Там, если все подходит, то полосы прокрутки не появляются, иначе полосы прокрутки появляются. Мне не хваталоfloat: none который вы указали.jsfiddle.net/miki725/9Ndjw
 04 июл. 2012 г., 22:59
@ miki725 На самом деле вы можете сделать это с<div>, Смотрите мое редактирование.

Ваш ответ на вопрос