如何在Bootstrap 3网格系统中调整装订线？

Question

新的Bootstrap 3网格系统非常棒.它在所有屏幕尺寸的响应式设计中功能更强大,嵌套更容易.

但我有一个我无法弄清楚的问题.如何在列之间添加精确的间隙？假设我有容器960px,310px的3列和3列之间的15px的2个gutters.我怎么做？

Answer 1

您可以为此创建一个CSS类并将其应用于您的列.由于排水沟(列之间的间距)由Bootstrap 3中的填充控制,因此相应地调整填充:

.col {
  padding-right:7px;
  padding-left:7px;
}

编辑如果您只想要列之间的间距,您可以选择除了第一个和最后一个之外的所有列,如下所示.

.col:not(:first-child,:last-child) {
  padding-right:7px;
  padding-left:7px;
}

更新了Bootply

但这样它也会为第一个孩子添加填充.这不是我想要的.我在想的是,也许我可以添加容器975px,并添加padding-right:15px; 到.col.当屏幕尺寸改变时,我必须删除该填充权:15px;.另外,如果我在页面上有其他元素.我需要添加这个填充权:15px; 并在屏幕尺寸改变时将其删除.我不确定这是否是在Bootstrap 3中处理带有装订线的列的最佳方法. (2认同)

Answer 2

要定义3列网格,您可以使用自定义程序或下载源设置较少的变量并重新编译.

要了解有关网格和列/装订线宽度的更多信息,请阅读:

在你的情况下,使用960px的容器考虑中等网格(另请参阅:http://getbootstrap.com/css/#grid).此网格的最大容器宽度为970px.设置@grid-columns:3;和设置@grid-gutter-width:15px;变量时,您将得到:

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px

+1关于Bootstrap 3.3.6,下载LESS文件可能是最有效的方法.谁真的想进入.CSS文件并手动修改x个Bootstraps选择器??? 并且只在需要另一个Bootstrap项目时再次执行此操作？允许LESS完成所有繁重的工作. (2认同)