天天看點

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

1.添加栅格和倆列的設定,大緻html如下

text-center是使文本水準居中顯示

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

設定圖檔的CSS:

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

2.效果:

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

3.現在問題是如何使右側的文字居中:(利用flex布局實作)

①在row中設定:display:flex

②在裡面的col-md-6 設定其分别占據一半的width;flex:0 0 50%;

如下圖是以:height高度已經搞定

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

③給其加margin-bottom,margin-top分别置auto;效果:文字已經垂直居中。

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

④CSS設定為:(到這裡在大于992px已經配置完畢,不過低于992px就有問題)

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

⑤在低于992px的時候出現了布局問題:

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

**解決:**在低于992px的時候,讓col-md-6的width:100%,讓其占據整行,然後在row上再加個換行就行了(flex-wrap: wrap; /控制換行/)。

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

⑥這樣後,bootstrap的響應式就完成了,下面為css代碼:

利用Bootstrap在栅格中左側圖檔,右側文字垂直居中

繼續閱讀