TW Bootstrap：如何溢出列 [英] TW Bootstrap: How to overflow columns

问题描述

我想有一个列可以水平滚动的行：

正如你可以看到的那一行是外部块（带有填充）。在它的内部，有一些列，每个都有一些 span * 类，如 span3 。

这里是我尝试做的（使用inline css），到目前为止没有运气。

 < div class =row> 
 
<！ - 将有滚动条的父元素 - > 
< div class =span12style =white-space：nowrap; overflow-x：auto;> 
 
< div class =row> 
 
< div class =span3style =display：inline-block;> content here< / div> 
< div class =span3style =display：inline-block;> content here< / div> 
< div class =span3style =display：inline-block;> content here< / div> 
 ... 
 
< div> 
 
< / div> 
 
< / div> 
  

但是列只是换行时不能放入行。

解决方案

strong>更新

我想你刚刚错过了 float：none; ： float force 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; / *非常重要* / 
} 
  

无论如何，这不是因为你应该。有些类似轮播可以实现这种效果。

IMHO 网页原本意在水平滚动，而JavaScript可以执行任何操作。

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

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.

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

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

解决方案

Updated

I guess you just missed the float: none; : float forces 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 */
}

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

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

这篇关于TW Bootstrap：如何溢出列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！