1.添加栅格和倆列的設定,大緻html如下
text-center是使文本水準居中顯示
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL5lkaNVzY65UeRpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL0MTN2EzNyUTMxMTNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
設定圖檔的CSS:
2.效果:
3.現在問題是如何使右側的文字居中:(利用flex布局實作)
①在row中設定:display:flex
②在裡面的col-md-6 設定其分别占據一半的width;flex:0 0 50%;
如下圖是以:height高度已經搞定
③給其加margin-bottom,margin-top分别置auto;效果:文字已經垂直居中。
④CSS設定為:(到這裡在大于992px已經配置完畢,不過低于992px就有問題)
⑤在低于992px的時候出現了布局問題:
**解決:**在低于992px的時候,讓col-md-6的width:100%,讓其占據整行,然後在row上再加個換行就行了(flex-wrap: wrap; /控制換行/)。
⑥這樣後,bootstrap的響應式就完成了,下面為css代碼: