水平对齐:#
添加样式 justify-content-start (左对齐)/ center (居中对齐) / end (右对齐) / around (等距对齐) / between (两边对齐)
<div class="container"> <!--.row限制一行--> <div class="row justify-content-end" style="border:3px solid;height: 100px"> <div class="col-3" style="background: #ff6262">炽焰</div> <div class="col-3" style="background: #5b9df9">冰蓝</div> <div class="col-3" style="background: #2c7d59">青草</div> </div> </div>
**注意点, 就是说, 如果想看到水平对齐的效果的话, 前提是, 当前row里面的 col 不要把12列占满, 试想一下 ,如果他把12列全部占满了, 肯定是看不看水平移动的效果的, 因此我上面的row里三个div的 col都为3 **
右对齐的效果如下:
同样可以配合断点使用
<div class="container"> <!--.row限制一行--> <div class="row justify-content-xl-end" style="border:3px solid;height: 100px"> <div class="col-3" style="background: #ff6262">炽焰</div> <div class="col-3" style="background: #5b9df9">冰蓝</div> <div class="col-3" style="background: #2c7d59">青草</div> </div> </div>
配置断点使用, 还是那个套路, 就是我们在上面添加的断点很明显就是 xl , 意思就是说只有当我的浏览器的可视长度大于1200px时,class= justify-content-xl-end 水平右对齐生效 , 效果如下:
但是当我的浏览器的可视长度小于1200px时, class= justify-content-xl-end 失效, 于是row里面的四个div按照积极默认的属性布局, 就成了下面的样子
换行#
<div class="container-fluid"> <!--.row限制一行--> <div class="row"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="w-100"></div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> <div class="col" style="background: #2c7d59">青草</div> </div> </div>
可以使用 class = w-100实现换行
效果图
间距沟槽的清除#
还是下面的这段html
<div class="container"> <!--.row限制一行--> <div class="row justify-content-end"> <div class="col" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="col" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
效果如下: 汉字和div两边是存在一个间距的
**通过属性 .no-gutters 去除这个间距 **
<div class="row no-gutters">
重排列#
添加 order-number 可以实现重排序
还是这段html
<div class="container"> <!--.row限制一行--> <div class="row no-gutters"> <div class="col order-0" style="background: #ff6262">炽焰</div> <div class="col" style="background: #5b9df9">冰蓝</div> <div class="col order-2" style="background: #2c7d59">青草</div> <div class="col" style="background: #8E2DE2">江户</div> </div> </div>
order的默认是0 , order-number number越大, 整体就越往后排, 上面我 设置赤焰的order-0 它的顺序没变, 将青草设置为 order-2 它就排在了最后一位上, 效果如下
此外, 如果想直接排在最前面, 可以设置 order-first
偏移#
.offset-number ; number是偏移的格子数
还是这段html
<div class="container"> <!--.row限制一行--> <div class="row no-gutters"> <div class="col order-0" style="background: #ff6262">炽焰</div> <div class="col offset-3" style="background: #5b9df9">冰蓝</div> <div class="col " style="background: #2c7d59">青草</div> </div> </div>
我设置冰蓝的偏移量是3个单位
效果如下:
同样, 偏移可以配合断点使用,
布局#
可以使用 ml-auto 或者 mr-auto 进行布局
还是这段html
<div class="container"> <!--.row限制一行--> <div class="row no-gutters"> <div class="col-3 " style="background: #ff6262">炽焰</div> <div class="col-3 ml-auto" style="background: #5b9df9">冰蓝</div> <div class="col-3 " style="background: #2c7d59">青草</div> </div> </div>
当我们设置ml-auto 其实就是 margin-left-auto , 格子的左边自动对齐, 格子被挤到了右边
效果如下:
列嵌套#
<div class="container"> <!--.row限制一行--> <div class="row no-gutters"> <div class="col-3 " style="background: #ff6262">炽焰</div> <div class="col-3 " style="background: #5b9df9">冰蓝</div> <div class="col-3 " style="background: #2c7d59">青草</div> <div class="col-3 " style="background: #2c7d59"> <div class="row" > <div class="col-xl-8" style="background: #8E2DE2">江户</div> <div class="col-xl-4" style="background: #5b9df9">冰蓝</div> </div> </div> </div> </div>
我们在一个row里面的 col中, 可以嵌套row , 同样可以结合 断点使用
效果图:
并且, 当我的浏览器的宽度小于1200px时, xl 失效, 每个col都单独占行, 最外面的row的高度也会被撑开. 如下
响应式的分界点#
<!--.row限制一行--> <div class="row no-gutters"> <div id="myP">Bootstrap</div> </div>
可以通过 @media设置响应式的分界点
/*当min-width大于768px时生效*/ @media (min-width: 768px) { #myP{ font-size: 32px; color: #ffc107; } }
更多的使用方式:
@media all { } @media (min-width: 576px)and(max-width: 767px) { } @media (min-width: 768px)and(max-width: 991px) { } @media (min-width: 992px)and(max-width: 1199px) { } @media (min-width: 1200px) { }
