Bootstrap - 水平滚动条答案

【问题标题】：Bootstrap - Horizontal ScrollbarBootstrap - 水平滚动条
【发布时间】：2015-07-23 20:08:06
【问题描述】：

下面的代码我需要水平滚动条。

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

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

【问题讨论】：

标签： html twitter-bootstrap css angular-ui-bootstrap

【解决方案1】：

可能是：

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

然后在你的 css 中：

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

fiddle

【讨论】：

请给小提琴链接

【解决方案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 部分为包装器提供了在内容溢出时水平滚动的属性，并告诉它不要包装（“换行符”）文本之间的空格，或者在这种情况下为子元素。

.col-md-3 部分“入侵”到 Bootstraps 网格系统并禁用向左浮动 - 这是造成第四个和第五个“树”之间换行的原因。 "display: inline-block" 将你的元素呈现在一行中，而 "vertical-align: top" 使它成为你可能猜到的顶部对齐。

问题

这种“hack”使引导网格变得毫无用处 - 至少对于 3 列元素而言。

您可能希望为您的容器添加一个额外的类或 ID，以使新的 CSS 仅针对这个容器。

例如：

@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">

旧答案

主要问题是您误解了引导网格系统的要点。您尝试将 15 列 (5 x col-3) 包装在 12 列网格中。

是的，你可以这样做，但你必须围绕 Bootstrap 的基本原理工作，这有点傻......

向我们提供一些关于您想要实现的目标、您尝试了什么、演示等更精确的信息。

【讨论】：

请通过链接。 plnkr.co/edit/1mPjuXy7aOW6fJUav7ea?p=preview。在上面的链接中，树 1 到树 5 以垂直视图显示。但我只需要在水平视图中......请给我一些想法或一些有用的代码......