Grid layout using Bootstrap 3.0
我需要使用 Bootstrap 3.0 创建一个网格布局,列之间有空格。我正在使用宽度为 3 的一行和 4 个列。但是,它们全部一起出现,中间没有任何空格。我怎么能这样做?
示例:
1 2 3 4 5 6 7 8 9 10
| col1
col2
col3
col4 |
- 你在这里读过吗?
-
请参阅我对答案的评论,我已经引用了相同的链接。它没有说明如何在列之间留出空间。如果使用边距,则存在宽度溢出
-
考虑到我在你之前 2 分钟发布了链接,这让你处于一个奇怪的地方,不是吗?此外,您不遵循那里提到的代码。试试 col-md-*
-
@ShaharGalukman 保持冷静,我不是故意要冒犯你的!我没有看到你的评论。而且,如果您阅读文档,您会发现我要问的内容并没有在那里解释。
-
我没有冒犯队友,对于您的问题的解决方案,您可以在右侧添加一个带有边距的类,或者覆盖您从引导程序中使用的类来实现您想要的。我不确定 Bootstrap3 是否在他们的网格系统中包含边距。
-
@ShaharGalukman OK :) 好吧,如果您使用的是大型桌面,那么在这里使用 col-md-* 或 col-lg-* 没有区别。我不是设计师,我认为必须有一种"更优雅的方式"来做到这一点。
-
Bootstrap 似乎无法提供解决方案,它只是让您拥有灵活的网格布局,我会使用边距解决方案并确保使用 border-box 以便网格不会中断。祝你好运
-
@ShaharGalukman 我刚刚发布了一个解决问题的答案!
经过与@ShaharGalukman 的讨论,Bootstrap 3.0 似乎原生不支持此功能。所以,我所做的是:
使用 Bootstrap 3.0 语法创建网格,将所有列放在一起。然后,我没有将背景颜色设置为 col div,而是在每个包含 background-color 设置的 col 内创建了一个新的 div。这样你就有了列之间的划分。您可以使用新 div 的 margin 调整空白。设置 margin: -15px 在列之间不留空格。
希望这对其他人有帮助!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| col1
col2
col3
col4 |
我从未使用或听说过 boostrap 类"col-lg-3"。我使用 "spanX" 其中 X 是 12 列网格中的列数。
1 2 3 4 5 6 7 8 9 10
| col1
col2
col3
col4 |
- BS 3.0 对网格类使用完全不同的命名系统。
-
使用 span 是 Bootstrap 2 的语法,新版本 3 使用不同的语法,请参阅 getbootstrap.com/css/#grid