twitter-bootstrap Bootstrap - 水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31402306/
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
Bootstrap - Horizontal Scrollbar
提问by ipln
I need horizontal scroll bar for the below code.
我需要以下代码的水平滚动条。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1 class="page-header">Horizontal Scroll in bootstrap</h1>
<div class="container-fluid" style="overflow-x:scroll;">
<div class="col-sm-3">
<h3>Tree 1</h3>
</div>
<div class="col-sm-3">
<h3>Tree 2</h3>
</div>
<div class="col-sm-3">
<h3>Tree 3</h3>
</div>
<div class="col-sm-3">
<h3>Tree 4</h3>
</div>
<div class="col-sm-3">
<h3>Tree 5</h3>
</div>
</div>
</body>
</html>
If executed the above line the output shown as the image. But i need Tree 5 after Tree 4. Not below the Tree 1. If i increase Tree 6 it shown as After Tree 5. i.e., I need horizontal scrollbar. Please help me.
如果执行上述行，则输出显示为图像。但是我需要树 4 之后的树 5。不在树 1 之下。如果我增加树 6，它显示为树 5 之后。即，我需要水平滚动条。请帮我。
回答by Alex Coloma
回答by Foaster
New answer
新答案
Building on Alex Coloma's initial answer, but a lil clearer and without inline styles.
以 Alex Coloma 的初始答案为基础，但更清晰，没有内联样式。
Add the following code to your custom CSS file and it should do the trick:
将以下代码添加到您的自定义 CSS 文件中，它应该可以解决问题：
@media (min-width: 992px) {
.container-fluid {
overflow-x: scroll;
white-space: nowrap;
}
.col-md-3 {
display: inline-block;
vertical-align: top;
float: none;
}
}
What does it do and why does it work?
它有什么作用，为什么会起作用？
The .container-fluid part gives the wrapper the property to scroll horizontally if there's overflowing content and tells it to NOT wrap ("linebreak") the whitespace between text or in this case child-elements.
.container-fluid 部分为包装器提供了在内容溢出时水平滚动的属性，并告诉它不要包装（“换行”）文本之间的空白或在这种情况下是子元素。
The .col-md-3 part "hacks" into Bootstraps grid-system and disables the floating to the left - which was responsible for the linebreak between your fourth and fifth "tree". "display: inline-block" renders your elements in one line and "vertical-align: top" makes it as you may have guessed top-aligned.
.col-md-3 部分“侵入”了 Bootstraps 网格系统并禁用了向左浮动 - 这是造成第四和第五“树”之间换行的原因。“display: inline-block” 将您的元素呈现在一行中，而“vertical-align: top”使其成为您可能已经猜到的顶部对齐。
Problem
问题
This "hack" renders the bootstrap-grid pretty useless - at least for 3-column elements.
这种“hack”使引导网格变得毫无用处——至少对于 3 列元素而言。
You may wanna give your container an additional class or ID to make the new CSS only target this one container.
您可能希望为您的容器提供一个额外的类或 ID，以使新 CSS 仅针对这个容器。
e.g.:
例如：
@media (min-width: 992px) {
.container-fluid.my-own-class {
overflow-x: scroll;
white-space: nowrap;
}
.container-fluid.my-own-class .col-md-3 {
display: inline-block;
vertical-align: top;
float: none;
}
}
And then finally the line in your HTML would look like this:
最后，您的 HTML 中的行将如下所示：
<div class="container-fluid my-own-class">
Old answer
旧答案
The main problem is you're misunderstanding the point of the bootstrap grid-system. You try to wrap 15 columns (5 x col-3) in a 12 column grid.
主要问题是您误解了引导网格系统的要点。您尝试将 15 列（5 x col-3）包装在 12 列网格中。
Yeah, you can do that, but you have to work around the base principle of Bootstrap which would be kinda silly...
是的，你可以这样做，但你必须解决 Bootstrap 的基本原则，这有点愚蠢......
Give us little more precise information on what you wanna achieve, what you tried, a demo, etc.
给我们一些关于您想要实现的目标、您尝试过的内容、演示等的更准确的信息。
