2016-03-03 59 views
1

所以我正在为一个朋友的页面工作(http://jojorules.com/index.php/our-pillows/),我有4行,每列3列。每列之间需要有80px的空间,然而,每行的第一列和最后一列需要与徽标/导航条链接对齐(底部图像上的红色线条表示)。列之间的自举填充

我希望80px间距由底部图像中的蓝线/文本指示。

这些填充只会在桌面上,我会稍后添加,但我一直有问题想出一个干净的方式,运行良好,并坚持使用这些红线对齐。

enter image description here

+0

为什么在不使用网格时使用引导网格?您可以随时在下载引导程序时取消选中网格并创建自己的网格。 – AVAVT

+0

如果您不需要完全80像素,请尝试使用col-md-offset。 – stomo21

+0

您应该考虑删除该页面上的透明内容!它看起来与所有文本混乱。 http://s11.postimg.org/85a56d16b/baddesign.png – chrisv

回答

1

的列之间的空间除去第一栏和最后一栏的右侧填充的左填充对准与导航栏的内容。

,并让80px工作中使用这个片段(假设你正在使用col-md-4):

.col-md-4:first-child { padding-left: 0; padding-right: 40px; } 
.col-md-4:last-child { padding-right: 0; padding-left: 40px; } 
.col-md-4:nth-child(2) { padding-right: 40px; padding-left: 40px; } 

注意:为了使在右列中的文本与导航栏完全对齐的,您必须使用text-align: justify以强制文本对齐。

+1

完美,并为文本对齐位ty也:)正是我在找的东西 –