Question

enter image description here

我需要水平滚动条用于以下代码。

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

如果执行上面的行输出显示为图像。但我需要Tree 4之后的Tree 5.不在树下1.如果我增加Tree 6它显示为After Tree 5.即，我需要水平滚动条。请帮帮我。

Answer 1

可能是：

style="overflow-x:scroll; white-space: nowrap;"

然后在你的css中：

.col-sm-3{display: inline-block;}

fiddle

Answer 2

新答案

以Alex Coloma的初步答案为基础，但更清晰，没有内联样式。

将以下代码添加到自定义CSS文件中，它应该可以解决问题：

@media (min-width: 992px) {
  .container-fluid {
    overflow-x: scroll;
    white-space: nowrap;
  }
  .col-md-3 {
    display: inline-block;
    vertical-align: top;
    float: none;
  }
}

它做了什么以及为什么有效？

.container-fluid部分为包装器提供了水平滚动的属性，如果内容溢出并且告诉它不包装（＆＃34; linebreak＆＃34;）文本之间的空格或在这种情况下的子节点-elements。

.col-md-3 part＆＃34; hacks＆＃34;进入Bootstraps网格系统并禁用浮动到左侧 - 这是第四个和第五个树之间的换行符＃34; ＆＃34;显示：内联块＆＃34;将您的元素呈现在一行中＆＃34; vertical-align：top＆＃34;因为你可能已经猜到了顶部对齐。

<强>问题

这＆＃34; hack＆＃34;使引导网格变得毫无用处 - 至少对于3列元素。

您可能希望为容器添加一个额外的类或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;
  }
}

最后，HTML中的行看起来像这样：

<div class="container-fluid my-own-class">

旧答案

主要问题是你误解了引导网格系统的重点。您尝试在12列网格中包含15列（5 x col-3）。

是的，你可以做到这一点，但你必须解决Bootstrap的基本原则，这有点傻......

向我们提供更准确的信息，说明您想要达到的目标，尝试的内容，演示等等。

Bootstrap - 水平滚动条

2 个答案: