bootstraps栅格布局col-md-3问题

如图,想通过bootstrap快速做出这样的模板
在这里插入图片描述
首先引入了bootstrap文件后,设置好了col-md-3这样的布局之后
在这里插入图片描述
准备在div开始添加一些东西,发现以下情况
在这里插入图片描述
百思不得其解,一开始是疑惑是否是设置的宽度太大导致上不去,后来觉得是浮动的问题一直上不去,一直无法解决问题,之后在检查页面元素时发现左边的边框是什么,秉着好奇的心态我去看了下,它竟然是col-md-3的,这激发出了我的好奇心,难道是因为这个东西挡住了宽度,这个应该是padding,margin的问题,我尝试在百度搜索了一下col-md-3的关于消除左右两边间距的问题,果然真的是有这个问题,导致我中间的div无法居中,左右两个div无法贴紧边框,之后发现原来只需要定义一个class附加在col-md-3上即可

.col{
	padding:0;
	margin:0;
}

这样即可解决col-md-3左右间距问题,在往里面填充东西也就不会发生其他问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值