Html 超过 12 个带有水平滚动条的引导列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38382290/
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
More than 12 bootstrap columns with a horizontal scroll
提问by newbie
I am trying to make a table using bootstrap grid system. I know that we should use only 12 columns per row. But I wanted to have more than 12 columns with a horizontal scroll for the entire table. So I am trying with the following code snippet
我正在尝试使用引导网格系统制作表格。我知道我们应该每行只使用 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>
I wanted to display 8 fields like as mentioned above in one line. But after field 6, other two fields are coming down. Is there any way to have all 8 fields in single line with horizontal scroll.
我想在一行中显示如上所述的 8 个字段。但是在第 6 场之后，其他两个场都在下降。有什么办法可以将所有 8 个字段都放在一行中并带有水平滚动条。
回答by Gleb Kemarsky
Four tricks with the Bootstrap grid
Bootstrap 网格的四个技巧
1) 8 columns
1) 8 列
You can use nested grids. Without any tables or customizations. For example:
您可以使用嵌套网格。没有任何表格或自定义。例如：
<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) Scroll
2) 滚动
Increase the width of the main row, if you want to add horizontal scrolling:
如果要添加水平滚动，请增加主行的宽度：
@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) Various number of columns
3) 各种列数
If each row has various number of columns, but the number of columns is known in advance.
如果每一行有不同的列数，但列数是预先知道的。
In this case the rows may be different by the width. Therefore, it is necessary to set the width of columns relative to the screen width, rather than the width of the row.
在这种情况下，行的宽度可能不同。因此，需要相对于屏幕宽度设置列宽，而不是行宽。
- use
vwinstead of% - set special width for the row if it's wider then
100vw
- 使用
vw代替% - 如果该行更宽，则为该行设置特殊宽度
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) Unknown number of columns
4) 未知的列数
Convert columns to inline-blocks, if you don't know the number of columns in a row.
如果您不知道一行中的列数，请将列转换为内联块。
@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>回答by Martin
To get more columns:
要获得更多列：
You can make your own Bootstrap variation from here: http://getbootstrap.com/customize/where you can set the number of columns the grid layout uses as well as pretty much any other customisation of the CSS before downloading, installing and then using this (new) template on your website.
您可以从这里制作自己的 Bootstrap 变体：http: //getbootstrap.com/customize/，您可以在下载、安装和使用之前设置网格布局使用的列数以及几乎任何其他 CSS 自定义您网站上的这个（新）模板。
Easy.
简单。
Or, if you fancy a challenge and you got a couple of hours to kill you can open up the Bootstrap.cssfile and manually add new CSS elements and realign the width[percentage] parameters for each column definition.
或者，如果您喜欢挑战并且有几个小时的时间，您可以打开Bootstrap.css文件并手动添加新的 CSS 元素并重新调整width每个列定义的[percentage] 参数。
Horizontally scrolling tables
水平滚动表格
The whole premise of bootstrap is not to have anything overflow the screen, no matter what. If you specifically dowant things to overflow then you either shouldn't be using bootstrap or you will need to manually tweak some settings in the CSS, again, I refer you back to http://getbootstrap.com/customize/which mighthave a solution, otherwise you can explore the CSS and set some CSS parameters in the bootstrap template file.
引导程序的整个前提是无论如何都不要让任何东西溢出屏幕。如果你特别不想要的东西溢出，那么你要么不应该使用的引导，或者您需要在CSS手动调整一些设置，再次，我是指你回http://getbootstrap.com/customize/其中可能有一个解决方案，否则您可以探索 CSS 并在引导模板文件中设置一些 CSS 参数。
There may well be a pre-defined bootstrap table css class you can use for such things, have you explored the Bootstrap documentation?
很可能有一个预定义的引导表 css 类可以用于此类事情，您是否浏览过Bootstrap 文档？
Or Searching other questions on Stack Overflowcan give you some useful answers for doing this manually.
或者在 Stack Overflow 上搜索其他问题可以为您提供一些手动执行此操作的有用答案。
回答by Alan
You can split bootstrap col-12 in 2. You have now 24 columns
您可以将 bootstrap col-12 拆分为 2。您现在有 24 列
<div class "row">
<div class="col-6">
<div class "row">
<div class="col-1">
1
</div>
<div class="col-1">
2
</div>
<div class="col-1">
3
</div>
<div class="col-1">
4
</div>
<div class="col-1">
5
</div>
<div class="col-1">
6
</div>
<div class="col-1">
7
</div>
<div class="col-1">
8
</div>
<div class="col-1">
9
</div>
<div class="col-1">
10
</div>
<div class="col-1">
11
</div>
<div class="col-1">
12
</div>
</div>
</div>
<div class="col-6">
<div class "row">
<div class="col-1">
13
</div>
<div class="col-1">
14
</div>
<div class="col-1">
15
</div>
<div class="col-1">
16
</div>
<div class="col-1">
17
</div>
<div class="col-1">
18
</div>
<div class="col-1">
19
</div>
<div class="col-1">
20
</div>
<div class="col-1">
21
</div>
<div class="col-1">
22
</div>
<div class="col-1">
23
</div>
<div class="col-1">
24
</div>
</div>
</div>
</div>
回答by anupriya
<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>