bootstrap 使用總結

 

 

 

1.如何設置一行兩列？

<div class="container">

<div class="row">

<div class="col-lg-3 col-md-3 col-xs-3"></div>

<div class="col-lg-9 col-md-9 col-xs-9"></div>

</div>

</div>

下面看結構

效果

 標籤嵌套循環都寫在 裏面

 

2.bootstrap中後臺動態生成li等標籤 沒法添加col-lg-4 、col-md-四、col-xs-4等狀況使用flex佈局

兼容狀況

IE 10+

 紅框是居中 justify-content:center

flex佈局display flex

flex-warp換行

flex-direction默認是row 從左到右排列

 

 

3.bootstarp 中元素居中對齊

div{

float:none;

display:flex;

margin-left:auto;

margin-right:auto;

}

同時這個div 還添加別的類 好比col-lg-8 

 4.flex居中

實現 

div{

display:flex;

justify-content:center

}

這時候父級元素繼續上面的樣式  就能夠實現居中效果

 結構

 

效果