TW Bootstrap：如何溢出列

Question

我想要一行可以水平滚动：

如您所见，该行是外部块（带有填充）。在其中，有一些列，每个列都有一些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>

但是，一旦列无法放入行中，它们就会自动换行。我该怎么做？

谢谢。

Answer 1

更新

我猜你只是错过了 float: none; : float 部队 display: block;。

Live demo (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 */
}

无论如何，这并不是因为你可以做到你应该做到的。有carousels之类的东西可以达到这种效果。

恕我直言网页最初是用来水平滚动的，而 JavaScript 可以做任何事情。

Answer 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>

Answer 3

我认为你需要 span3 上的 overflow-x 而不是 span12