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」を追加してページ公開すると、反映します😊

フレームワークとして愛用している「_u（アンダースコア）」と「Bootstrap（ブートストラップ）」を合わせた「UnderStrap」をカスタマイズしている中でのTips

UnderStrap　
https://ja.wordpress.org/themes/understrap/

＜あるある例＞
ドロップダウン（子メニュー階層がある）メニュー構成時に、親メニューのリンクが効いていない

<!-- The WordPress Menu goes here -->
				<?php wp_nav_menu(
					array(
						'theme_location'  => 'primary',
						'container_class' => 'collapse navbar-collapse',
						'container_id'    => 'navbarNavDropdown',
						'menu_class'      => 'navbar-nav ml-auto ',
						'fallback_cb'     => '',
						'menu_id'         => 'main-menu',
						'depth'           => 2,
						'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
					)
				); ?>

△例えばこんな例
ドロップダウンメニューは作成できているのに、親カテゴリーは栗区は出来るけれどリンクは有効ではない状態です。
今回の場合は、「Understrap_WP_Bootstrap_Navwalker」とある通り、
WP_Bootstrap_Navwalker.phpを導入しているので、ここをカスタマイズしてみます。

        // If item has_children add atts to <a>.
        if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
            $atts['href']          = '#';
            $atts['data-toggle']   = 'dropdown';
            $atts['aria-haspopup'] = 'true';
            $atts['aria-expanded'] = 'false';
            $atts['class']         = 'dropdown-toggle nav-link';
            $atts['id']            = 'menu-item-dropdown-' . $item->ID;

もともとこのように記述されています。ここを

			// If item has_children add atts to <a>.
			if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
				//$atts['href']          = '#';
				$atts['href'] = ! empty( $item->url ) ? $item->url : '';
				//$atts['data-toggle']   = 'dropdown';
				$atts['aria-haspopup'] = 'true';
				$atts['aria-expanded'] = 'false';
				$atts['class']         = 'dropdown-toggle nav-link';
				$atts['id']            = 'menu-item-dropdown-' . $item->ID;

「href」の動きを変更、また

$atts['data-toggle']   = 'dropdown';

この１行を//でコメントアウト。
注:$ att [‘href’]が有効になり、$ atts [‘data-toggle’]が無効になり、親リンクがクリック可能になります。
このままだと、スマートフォンなど画面サイズによって挙動がおかしくなるので、style.cssに下記を追加。

.dropdown:hover .dropdown-menu {
    display: block;
}

PC版はこれでほぼOKになりました。
スマホで確認すると、親カテゴリーはリンクなし。。
もう少し頑張らないとダメな感じです。