Bootstrap4也是由以上基础概念作为发展
Bootstrap 栅栏式排版 , 总栏数为12
(以下代码正在寻找问题，但实际使用方法是错误的。)
style .box { height: 100px； background-color : blue violet； border: 1px solid white； (} /style！ -- container bootstrap用作外部容器的mt-3 margin-top-- divclass=' container mt-3 '！ -行先在外面-- div class='row '！ -共12栏，col-6占6栏，一半--divclass=' col-6 box '/divdivclass=' col-6 box '/div/divdivclass=' row ' divclass
发现有两个问题 :
一是没有Gutter(沟) 上图中的白线是由box的边框产生
二是 直接直接写一个box 其长度和上面的不一样
bootstrap的Gutter是直接加在cul上的
是通过cul的左边和右边的padding做到这样的效果
左右边的padding 会因为左边和右边靠在一起就是一个完整的Gutter
目前只有线，不包括gutter部分
加贴
中间框起来的即为一个完整的gutter
但是此时有一个问题
两侧会有超出的(多余的？)padding
这个超出的(多余的？)paddiig通过从最外层的row层添加负边距进行回填
所使用的的原始码
.row{
margin-rgiht:-15px;
margin-left:-15left;
}
.col-*{
padding-right:15px;
padding-left:15px;
}
重点 : 正确使用方法：
class="col-xx" 的外层是 class="row"
class="row" 的里面是class="col-xx"
页面内容放在class="col-xx" 的里面
一例：
divclass=' row ' divclass=' col-6 ' divclass=' box '/div/div class=' col-6 ' divclass=' box '/div/div
样品：
divclass=' container mt-3 ' divclass=' row ' divclass=' col-4 ' menu/divdivclass=' col-8 ' H2 )这是标题/h2 p
转载于：https://www.cn blogs.com/mkl7/p/10914220.html