如图,想通过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左右间距问题,在往里面填充东西也就不会发生其他问题。