ブートストラップを使用して固定コンテナ内に全幅の背景を作成するにはどうすればよいですか?

drewrowalnd

ウェブサイトの1ページのサブセクションの背後にある全幅の背景色を作成したいと思います。BGが灰色であるこのデザインの「私たちの価値観」セクションのようなもの:https//www.w3schools.com/bootstrap/trybs_theme_company_full.htm

私のテーマは、ヘッダーで.containerを宣言し、フッターでその.containerを閉じます。

編集したいページはこんな感じ

<div class="content-wrap">
<div class="blog-top">test text - no bg color</div>
<!--This is where I want the full-width background color to start-->
    <div id="primary" class="content-area content-area-arch<?php echo $zillah_sidebar_show !== true ? ' content-area-with-sidebar' : ''; ?>">

        <main id="main" class="site-main" role="main">

            <?php zillah_hook_index_top(); ?>

        <?php
            /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
            $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
            query_posts( array ( 'category_name' => 'featured', 'posts_per_page' => 24, 'paged' => $paged) );


            ?>

            <?php
            if ( have_posts() ) :
            while ( have_posts() ) :

                the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */

                $alternative = $zillah_alternative_layout == true ? $zillah_alternative_layout : '-alternativeblog';
                get_template_part( 'template-parts/content' . $alternative , get_post_format() );

            endwhile;

            the_posts_navigation();

        else :

            get_template_part( 'template-parts/content', 'none' );

        endif;
        ?>

            <?php zillah_hook_index_bottom(); ?>
        </main><!-- #main -->

    </div><!-- #primary -->
    <!--This is where I want the full-width background color to start-->


</div><!-- .content-wrap -->
<?php zillah_hook_index_after(); ?>

全幅の背景色をどこから始めたいかを書き留めました。.container内で次の.container-fluidを実行する方法はありますか、それともWordPress /ブートストラップのカスタムページのこの特定のサブセクションでこの全幅の背景を実現する方法についての提案はありますか?

助けてくれてありがとう!

JasonB

これは、全幅の背景色を設定する1つの方法です。使用:before設定することで、絶対位置全幅の背景を作成するために、擬似要素をheight:autowidth: 100vw画像や色の背景を設定できます。バックグラウンドコードをクラスに配置して、domまたはBootstrapグリッド構造を変更せずに中央のブロックレベル要素にアタッチできるようにします。

html { overflow-x: hidden; }-100vwの背景要素によって引き起こされる水平スクロールバーを回避するために追加されました。

.bg-full {
  position: relative;
}

.bg-full:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50%);
  height: 100%;
  width: 100vw;
  background: red;
}

html {
  overflow-x: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col">
      Row 1
    </div>
  </div>
  <div class="row bg-full">
    <div class="col">
      Row 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      Row 3
    </div>
  </div>
</div>
<div class="container bg-full">
  <div class="row">
    <div class="col">
      Row 4
    </div>
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ブートストラップ4:コンテナ内のコンテンツを含む全幅のナビゲーションバーを作成するにはどうすればよいですか(SOナビゲーションバーのように)?

分類Dev

Bootstrapで固定の高さとスクロールを使用して全幅のテーブルを作成するにはどうすればよいですか?

分類Dev

コンテナブートストラップの修正幅をパーセンテージで設定するにはどうすればよいですか?

分類Dev

コンテナよりも幅が広いが全幅ではないブートストラップコンテナを取得するにはどうすればよいですか?

分類Dev

ブートストラップ:コンテナの幅を1400pxに変更するにはどうすればよいですか?

分類Dev

ブートストラップ:コンテナの幅を変更するにはどうすればよいですか?

分類Dev

ブートストラップの背景コンテナを2色に分割するにはどうすればよいですか?

分類Dev

ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

分類Dev

ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

分類Dev

ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

分類Dev

ブートストラップコンポーネント(コンテナ)を、使用する初期ロードとホイッチクラスでウィンドウの幅と高さ全体に拡張するにはどうすればよいですか?

分類Dev

ブーストラップを使用してアイコンの横にテキストを配置するにはどうすればよいですか?

分類Dev

ブートストラップ4.xを使用して1つのタブを使用して2つのタブコンテナのコンテンツを変更するにはどうすればよいですか?

分類Dev

ブートストラップコンテナ内の要素を修正するにはどうすればよいですか?

分類Dev

2つのコンテナを並べてブートストラップに配置するにはどうすればよいですか?

分類Dev

Shadow DOM内のdivをリーフレットマップコンテナーとして使用するにはどうすればよいですか?

分類Dev

<div>タグとブートストラップのみを使用してテーブルを作成するにはどうすればよいですか?

分類Dev

ブートストラップカルーセルをページの全幅にするにはどうすればよいですか?

分類Dev

jUnitテストランナーを使用してIntelljで新しいLeiningenClojureプロジェクトを作成するにはどうすればよいですか?

分類Dev

CSSを使用して長い文字列を固定幅のコンテナにラップするにはどうすればよいですか?

分類Dev

ホスト名を介してdockerネットワーク内の他のコンテナーにpingするにはどうすればよいですか?

分類Dev

プライベートサブクラスのコンテナメンバーを作成するにはどうすればよいですか?

分類Dev

ブートストラップを使用してボーダレステーブルを作成するにはどうすればよいですか

分類Dev

ブートストラップ-コンテナを下部に固定しながら、自然なコンテナレイアウトを維持するにはどうすればよいですか?

分類Dev

ブートストラップテーブルをフォーマットして、すべてのコンテンツを左揃えにし、必要なスペースのみを使用するにはどうすればよいですか?

分類Dev

Leafletを使用してRでGTFSデータのインタラクティブプロットを作成するにはどうすればよいですか?

分類Dev

Intellijで、略語内に変数名を使用してライブテンプレートを作成するにはどうすればよいですか?

分類Dev

コンテンツが固定の背景コンテナをスクロールしないようにするにはどうすればよいですか?

分類Dev

スコアリングコンテンツを使用して固定の背景画像を作成するにはどうすればよいですか?

Related 関連記事

  1. 1

    ブートストラップ4:コンテナ内のコンテンツを含む全幅のナビゲーションバーを作成するにはどうすればよいですか(SOナビゲーションバーのように)?

  2. 2

    Bootstrapで固定の高さとスクロールを使用して全幅のテーブルを作成するにはどうすればよいですか?

  3. 3

    コンテナブートストラップの修正幅をパーセンテージで設定するにはどうすればよいですか?

  4. 4

    コンテナよりも幅が広いが全幅ではないブートストラップコンテナを取得するにはどうすればよいですか?

  5. 5

    ブートストラップ:コンテナの幅を1400pxに変更するにはどうすればよいですか?

  6. 6

    ブートストラップ:コンテナの幅を変更するにはどうすればよいですか?

  7. 7

    ブートストラップの背景コンテナを2色に分割するにはどうすればよいですか?

  8. 8

    ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

  9. 9

    ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

  10. 10

    ブートストラップで親の全幅に及ぶボタングループを取得するにはどうすればよいですか?

  11. 11

    ブートストラップコンポーネント(コンテナ)を、使用する初期ロードとホイッチクラスでウィンドウの幅と高さ全体に拡張するにはどうすればよいですか?

  12. 12

    ブーストラップを使用してアイコンの横にテキストを配置するにはどうすればよいですか?

  13. 13

    ブートストラップ4.xを使用して1つのタブを使用して2つのタブコンテナのコンテンツを変更するにはどうすればよいですか?

  14. 14

    ブートストラップコンテナ内の要素を修正するにはどうすればよいですか?

  15. 15

    2つのコンテナを並べてブートストラップに配置するにはどうすればよいですか?

  16. 16

    Shadow DOM内のdivをリーフレットマップコンテナーとして使用するにはどうすればよいですか?

  17. 17

    <div>タグとブートストラップのみを使用してテーブルを作成するにはどうすればよいですか?

  18. 18

    ブートストラップカルーセルをページの全幅にするにはどうすればよいですか?

  19. 19

    jUnitテストランナーを使用してIntelljで新しいLeiningenClojureプロジェクトを作成するにはどうすればよいですか?

  20. 20

    CSSを使用して長い文字列を固定幅のコンテナにラップするにはどうすればよいですか?

  21. 21

    ホスト名を介してdockerネットワーク内の他のコンテナーにpingするにはどうすればよいですか?

  22. 22

    プライベートサブクラスのコンテナメンバーを作成するにはどうすればよいですか?

  23. 23

    ブートストラップを使用してボーダレステーブルを作成するにはどうすればよいですか

  24. 24

    ブートストラップ-コンテナを下部に固定しながら、自然なコンテナレイアウトを維持するにはどうすればよいですか?

  25. 25

    ブートストラップテーブルをフォーマットして、すべてのコンテンツを左揃えにし、必要なスペースのみを使用するにはどうすればよいですか?

  26. 26

    Leafletを使用してRでGTFSデータのインタラクティブプロットを作成するにはどうすればよいですか?

  27. 27

    Intellijで、略語内に変数名を使用してライブテンプレートを作成するにはどうすればよいですか?

  28. 28

    コンテンツが固定の背景コンテナをスクロールしないようにするにはどうすればよいですか?

  29. 29

    スコアリングコンテンツを使用して固定の背景画像を作成するにはどうすればよいですか?

ホットタグ

アーカイブ