关于 html:使用 Bootstrap 3.0 进行网格布局

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


经过与@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


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269177.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论