Css TW引导：如何溢出列

我希望有一行列可以水平滚动：

如您所见，行是外部块（带填充）。在它的内部，有一些列，每个列都有一些

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>

满足于此
满足于此
满足于此
...

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

---

谢谢。

您需要的是span3上的overflow-x，而不是span12，我想

已更新

我猜你错过了浮动：无：

浮动

强制

显示：块




div.myClass{
溢出-x：自动；
空白：nowrap；
}
div.myClass[类*=“列”]，/*TWBS v3*/
div.myClass[class*=“span”]{/*TWBS v2*/
显示：内联块；
浮动：无；/*非常重要*/
}

无论如何，这并不是因为你能做到你应该做到的。有这样的事情可以达到这种效果

IMHO一个网页本来应该是水平滚动的，而JavaScript可以做任何事情。
我更进一步了。可滚动的水平列

   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>

div.h-可滚动{
溢出-x：自动；
空白：nowrap；
}
div.h-可滚动[类*=“列”]{
显示：内联块；
浮动：无；
空白：正常；
垂直对齐：顶部；
}
上午9点
废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话
废话废话废话废话
废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话布拉哈
废话废话废话废话
废话废话废话废话
废话废话废话废话
上午9点
废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话
废话废话废话废话
废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话布拉哈
废话废话废话废话
废话废话废话废话
废话废话废话废话
我想在span12中放入更多内容，这样它才能容纳，因此溢出需要存在。对不起，我是说span3上的溢出-y他们为什么需要溢出-y？我不知道我在说什么，抱歉，我来试试。为什么
pre
tag？thanx。它工作得很好！。我对这个解决办法做了手脚。在那里，如果一切都合适，那么就不会显示任何图标，否则会显示图标。我遗漏了你指出的
float:none
@Sherbrow是否可以让水平滚动条响应用户的滑动手势，而不是控制滚动条，我也不希望滚动条可见我正试图解决同样的问题，这就像一个魅力…谢谢。效果很好！更新了最新的Bootstrap3（撰写本文时为3.3.5）：您能提供小提琴吗？这通常有助于审查