CSS TW Bootstrap:如何溢出列

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11320323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:22:17  来源:igfitidea点击:

TW Bootstrap: How to overflow columns

csstwitter-bootstrap

提问by miki725

I want to have a row where columns are going to be horizontally scrollable:

我想要一行,其中的列将可以水平滚动:

scrollable columns in a single row in twitter bootstrap

twitter bootstrap 中单行的可滚动列

As you can see the row is the outer block (with padding). Inside of it, there are columns where each has some span*class such as span3. And since all of the columns do not fit in the row, the scrollbar is on the bottom.

如您所见,该行是外部块(带填充)。在它里面,有一些列,每个列都有一些span*类,例如span3. 并且由于所有列都不适合该行,因此滚动条位于底部。

Here is what I tried doing (with inline css) and so far no luck.

这是我尝试做的(使用内联 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>

But then the columns just wrap once they can't fit into the row. How can I do this?

但是,一旦列无法放入行中,它们就会自动换行。我怎样才能做到这一点?

Thank you.

谢谢你。

回答by Sherbrow

Updated

更新

I guess you just missed the float: none;: floatforces display: block;.

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

Live demo (jsfiddle)

现场演示(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 */
}

Anyway this is not because you can do it that you should. There are things like carouselsthat can achieve this kind of effects.

无论如何,这不是因为你可以做到你应该做的。有像轮播这样的东西可以达到这种效果。

IMHO a web page is originally meant to be horizontally scrolledwhereas JavaScript can do anything.

恕我直言,网页最初是为了水平滚动而 JavaScript 可以做任何事情。

回答by philipjohnbasile

I took it a bit further. Scrollable horizontal columns!

我更进一步。可滚动的水平列!

   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>

回答by dezman

You need the overflow-x on the span3's not the span12 i think

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