超过 12 个带有水平滚动条的引导列

Question

我正在尝试使用引导网格系统制作一张桌子。我知道我们每行应该只使用 12 列。但我希望整个表格有超过 12 列的水平滚动条。所以我正在尝试使用以下代码片段

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

我想像上面提到的那样在一行中显示 8 个字段。但是在第 6 场之后，其他两个场都在下降。有没有办法让所有 8 个字段都在水平滚动的单行中。

原文由 newbie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 网格的四个技巧

1) 8列

您可以使用嵌套网格。没有任何表格或定制。例如：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

2）滚动

如果要添加水平滚动，请增加主行的宽度：

 @media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll > .row {
    width: 133.33333333%; /* = 100% * 4/3 */
  }
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>

3）各种列数

如果每一行都有不同数量的列，但列数是预先知道的。

在这种情况下，行的宽度可能不同。因此，需要设置相对于屏幕宽度的列宽，而不是行宽。

1. 使用 vw 代替 %
2. 为行设置特殊宽度，如果它 100vw

 @media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll .columns-16 {
    width: 133.33333333vw;  /* = 100vw * 16/12 */
  }
  .container-scroll .columns-24 {
    width: 200vw;  /* = 100vw * 24/12 */
  }
  .container-scroll .col-md-2 {
    width: 16.66666667vw !important;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row columns-16">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>
</div>

<div class="container-fluid container-scroll">
  <div class="row columns-24">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>
</div>

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

4）列数未知

如果您不知道一行中的列数，请将列转换为行内块。

 @media (min-width: 992px) {
  .container-scroll > .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .container-scroll > .row > .col-md-2 {
    display: inline-block;
    float: none;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

原文由 Gleb Kemarsky 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要获得更多列：

您可以从这里制作自己的 Bootstrap 变体： http://getbootstrap.com/customize/ 您可以在其中设置网格布局使用的列数，以及在下载、安装和使用之前对 CSS 进行几乎所有其他自定义您网站上的这个（新）模板。

简单。

或者，如果您喜欢挑战并且有几个小时可以消磨，您可以打开 Bootstrap.css 文件并手动添加新的 CSS 元素并重新对齐 width [百分比] 参数每个列定义。

水平滚动表格

bootstrap 的整个前提是无论如何都不要让任何东西溢出屏幕。如果您 确实 希望事情溢出，那么您要么不应该使用 bootstrap，要么您需要手动调整 CSS 中的一些设置，再次，我建议您返回 http://getbootstrap.com/customize/ 可能 有一个解决方案，否则您可以探索 CSS 并在引导程序模板文件中设置一些 CSS 参数。

很可能有一个预定义的 bootstrap table css 类可以用于此类事情，您是否浏览过 Bootstrap 文档？

或者 在 Stack Overflow 上搜索其他问题 可以为您提供一些有用的手动执行此操作的答案。

原文由 Martin 发布，翻译遵循 CC BY-SA 3.0 许可协议