twitter-bootstrap 使用ul li标签使用引导程序进行css水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13906721/
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
css horizontal scrolling with bootstrap using ul li tags
提问by hellomello
I'm trying to horizontal scroll using bootstrap, but I'm not able to get it to scroll horizontally. My litags just doesn't wrap the way it should (it's wrapping normally).
我正在尝试使用引导程序水平滚动，但我无法让它水平滚动。我的li标签只是没有按照它应该的方式包装（它是正常包装）。
HTML:
HTML：
<div class="container suggest">
<ul class="thumbnails bsuggest" >
<li class="span2">
text goes here
</li>
</ul>
</div>
CSS:
CSS：
.bsuggest
{
overflow-x:scroll;
overflow-y:hidden;
height:250px;
white-space:nowrap; !important
width:100%;
}
.bsuggest li
{
float:left;
display:inline-block;
*dsplay:inline;/* For IE7*/
*zoom:1;/* For IE7*/
white-space:normal;
}
.suggest
{
width:100%;
position:relative;
margin-top:95px;
}
I think I've done what its supposed to?
我想我已经完成了它应该做的事情？
回答by adriaan
In Bootstrap 2you have to overwrite some span*styling.
在 Bootstrap 2 中，您必须覆盖一些span*样式。
The ulelement has to get this css:
该ul元件必须得到这个CSS：
ul.your-horizontal-list {
white-space: nowrap;
overflow-x: auto;
}
ul.your-horizontal-list li[class*="span"] {
display: inline-block;
float: none;
}
Here is an working demo.
这是一个工作演示。
Make sure that your CSS is loaded after the bootstrap CSS.
确保在引导 CSS 之后加载您的 CSS。
EDIT: Name it Bootstrap 2, in Bootstrap 3 you probably need to replace spanwith col-...or something similar.
编辑：将其命名为 Bootstrap 2，在 Bootstrap 3 中，您可能需要替换span为col-...或类似的东西。
回答by dev
On the line white-space:nowrap; !importantin .bsuggestthe !importantneeds to be before the ;
上线white-space:nowrap; !important中.bsuggest的!important需求是前;
Like so white-space:nowrap !important;
像这样 white-space:nowrap !important;
