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背景元素引起的水平滚动条。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在带引导程序的固定容器内创建全角背景？

1 个答案: