bootstrap4栅格系统布局

Bootstrap4 栅格系统的列间隔问题

上星期在听了bootstrap课后,老师对于栅格系统的应用讲的很水,对于列间隔,仿佛只有应用col-offset列偏移来确定列之间的间隔,当时就觉得很困惑。

在这里插入图片描述


上图是我经过一个多星期的探索,终于在列与列之间出现了10px的间隔。

主要代码如下:
在这里插入图片描述


浏览器中显示的第一行,每个div之间有10px的间隔,
而在第二行中,我只在第一个div之间加了margin-right:10px,却直接导致了第三个div被挤到了下一行。查阅了很多资料,并没有对此有详细的解释

在这里插入图片描述


在查阅bootstrap4的栅格系统文档时,发现其支持列的自动布局(如上图所示),而这个自动布局可以通过调节margin属性随意调节列间距。(我认为自动列布局不像显示定义,例如col-md-4,是固定大小,具体的原因现在还是不很明白)

猜你喜欢

转载自blog.csdn.net/weixin_45821324/article/details/108967977
今日推荐