Bootstrap4でcssで親要素を無視してブラウザ幅100%で表示させる方法

: norico.d

Bootstrapを利用してWordPressの新規テーマ作成をあれこれ検討中。
Bootstrapで使用されるcontainer、container-fluidの設定がブラウザ画面の横幅100％ではないけれど、一部分だけ100％にしたいとき。

色々試してみて、『親要素の幅を無視して子要素を100％にする』専用のclassを用意することにしました。

 .full-width {
     width:100vw; 
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
 }
 .full-width img{
     max-width:100vw;
     width:100vw;
 }

新しいclassに「 width:100vw; 」を指定しました。
これが、100%の代わりになるコードですね。
vwは単位の一つで、略さなければ viewport width となります。
ちなみに高さの場合は height:100vh; となって、
こちらは viewport height です。
wとhなので覚えておくとよいかと。

WordPress5系になってから、「グーテンベルグ」を当初は敬遠していましたが、基本設定に設定できるものも多いし、パターンを登録できるのが地味に有難かったりします。

今回の「full-width」のclass設定は、
カバーのブロックのプロパティで「高度な設定」＞「追加SCCクラス」の欄に「full-width」を追加してページ公開すると、反映します😊

Follow me!