关于 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