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
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269177.html
