超过 12 个带有水平滚动条的引导列
[英] More than 12 bootstrap columns with a horizontal scroll
本文介绍了超过 12 个带有水平滚动条的引导列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用引导网格系统制作表格.我知道我们应该每行只使用 12 列.但我想要超过 12 列，整个表格的水平滚动条.所以我正在尝试使用以下代码片段
<span class="col-md-2" style="text-align: center;"><b>字段1</b></span><span class="col-md-2" style="text-align: center;"><b>字段 2</b></span><span class="col-md-2" style="text-align: center;"><b>字段 3</b></span><span class="col-md-2" style="text-align: center;"><b>字段 4</b></span><span class="col-md-2" style="text-align: center;"><b>字段 5</b></span><span class="col-md-2" style="text-align: center;"><b>字段 6</b></span><span class="col-md-2" style="text-align: center;"><b>字段 7</b></span><span class="col-md-2" style="text-align: center;"><b>字段 8</b></span>
我想在一行中显示如上所述的 8 个字段.但是在第 6 场之后，其他两个场都在下降.有没有办法让所有 8 个字段都在单行中水平滚动.
解决方案
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>字段 1</b></div><div class="col-md-6"><b>字段 2</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 3</b></div><div class="col-md-6"><b>字段 4</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 5</b></div><div class="col-md-6"><b>字段 6</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 7</b></div><div class="col-md-6"><b>字段 8</b></div>
2) 滚动
增加主行的宽度，如果要添加水平滚动:
@media (min-width: 992px) {.container-scroll {溢出-x:自动；}.container-scroll >.排 {宽度: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>字段 1</b></div><div class="col-md-6"><b>字段 2</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 3</b></div><div class="col-md-6"><b>字段 4</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 5</b></div><div class="col-md-6"><b>字段 6</b></div>
<div class="col-md-3"><div class="row text-center"><div class="col-md-6"><b>字段 7</b></div><div class="col-md-6"><b>字段 8</b></div>
3) 各种列数
如果每一行有不同的列数，但列数是预先知道的.
在这种情况下，行的宽度可能不同.因此，需要相对于屏幕宽度来设置列的宽度，而不是行的宽度.
- 使用
vw 而不是 % - 如果该行比
100vw 更宽，则为该行设置特殊宽度
@media (min-width: 992px) {.container-scroll {溢出-x:自动；}.container-scroll .columns-16 {宽度:133.33333333vw；/* = 100vw * 16/12 */}.container-scroll .columns-24 {宽度:200vw；/* = 100vw * 24/12 */}.container-scroll .col-md-2 {宽度:16.66666667vw ！重要；}}.container-scroll >.排 {边距顶部:24px；}.container-scroll >.row >.col-md-2 {字体粗细:粗体；文本对齐:居中；}
<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">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div><div class="col-md-2">字段 5</div><div class="col-md-2">字段 6</div><div class="col-md-2">字段 7</div><div class="col-md-2">字段 8</div>
<div class="container-fluid container-scroll"><div class="row columns-24"><div class="col-md-2">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div><div class="col-md-2">字段 5</div><div class="col-md-2">字段 6</div><div class="col-md-2">字段 7</div><div class="col-md-2">字段 8</div><div class="col-md-2">字段 9</div><div class="col-md-2">字段 10</div><div class="col-md-2">字段 11</div><div class="col-md-2">字段 12</div>
<div class="container-fluid container-scroll"><div class="row"><div class="col-md-2">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div>
4) 未知的列数
如果您不知道一行中的列数，请将列转换为行内块.
@media (min-width: 992px) {.container-scroll >.排 {溢出-x:自动；空白:nowrap；}.container-scroll >.row >.col-md-2 {显示:内联块；浮动:无；}}.container-scroll >.排 {边距顶部:24px；}.container-scroll >.row >.col-md-2 {字体粗细:粗体；文本对齐:居中；}
<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">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div><div class="col-md-2">字段 5</div><div class="col-md-2">字段 6</div><div class="col-md-2">字段 7</div><div class="col-md-2">字段 8</div>
<div class="row"><div class="col-md-2">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div><div class="col-md-2">字段 5</div><div class="col-md-2">字段 6</div><div class="col-md-2">字段 7</div><div class="col-md-2">字段 8</div><div class="col-md-2">字段 9</div><div class="col-md-2">字段 10</div><div class="col-md-2">字段 11</div><div class="col-md-2">字段 12</div>
<div class="row"><div class="col-md-2">字段 1</div><div class="col-md-2">字段 2</div><div class="col-md-2">字段 3</div><div class="col-md-2">字段 4</div>
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
<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.
解决方案
Four tricks with the Bootstrap grid
1) 8 columns
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
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
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
vw instead of %
- set special width for the row if it's wider then
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
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>
这篇关于超过 12 个带有水平滚动条的引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
