ウェブサイトの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 /ブートストラップのカスタムページのこの特定のサブセクションでこの全幅の背景を実現する方法についての提案はありますか?
助けてくれてありがとう!
これは、全幅の背景色を設定する1つの方法です。使用:before
設定することで、絶対位置全幅の背景を作成するために、擬似要素をheight:auto
とwidth: 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]
コメントを追加