如何使用引导程序在固定容器内创建全宽背景？

Question

我想创建一个全角背景颜色，以放在我网站上一个页面的子部分后面。类似于此设计中 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 / bootstrap 中自定义页面的这个特定子部分完成这个全角背景的建议？

谢谢你的帮助！

Answer 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>