css - Masterializecss 在使用容器时使背景颜色为窗口的 100%

Question

我在我的着陆页中使用了 materializecss。我在容器中设置了页面(使用 html {background-color: yellow}，但我希望第二个 div 中的背景颜色扩展窗口的整个宽度。我怎样才能“超出容器的边界”

这是一个jsfiddle

现在看起来像这样:

但我希望它看起来像这样:

这是我的 HTML

<div class="theme-landingpage-main">
  <div class="container">
    <div class="row">
      <div class="col m12 l12 s12 layout-header">
        <p class="headertitle">MELLOW<br /> MOMENT</p>
      </div>
    </div>
    <div class="row layout-hero">
      <div class="col s12 m6 l6 module-hero-picture-badge">
        <img id="badge" src="app/assets/img/login/badge.png" alt="">
        <img id="boxhero" src="app/assets/img/login/boxhero.png" alt="">
      </div>
      <div class="col s12 m6 l6 module-hero-text">
        <img id="text-chill-banner" src="app/assets/img/login/banner.png" alt="">
        <img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt="">
        <p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br>
          Focus your mind. Relax your body.<br>
          <p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p>
        </p>
        <img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt="">
        <img class="shop-button" src="app/assets/img/login/shopbut.png" alt="">
      </div>
    </div>
  </div>
</div>

这是 CSS

.theme-landingpage-main {
  background-color: #FFD000;

  //layouts and modules for landing page '/login'
  .layout-header {
    width: 100%;
    height: 130px;
    background-color: #FFD000;
    .headertitle {
      font-size: 40px !important;
      position: relative;
      font-family: 'Lobster Two', sans-serif !important;
      font-weight: 400;
      bottom: 25px;
    }
  }

  .layout-hero { <---------------- this is the div in question
    background-color: #F2F2F2; 
    .module-hero-picture-badge {
      #badge {
        position: relative;
        width: 65%;
        z-index: 2;
      }
      #boxhero {
        width: 75%;
        position: relative;
        left: 17%;
        bottom: 100px;
        z-index: 1;
      }
    }
    .module-hero-text{
      p {
        position: relative;
        top: 20px;
        right: 23px;
        font-size: 20px !important;
        text-align: center;
      }
      #text-chill-banner {
        width: 128%;
        position: relative;
        right: 20%;
        top: 50px;
        z-index: 3;
      }
      #talking-to-you {
        width: 480px;
        position: relative;
        top: 41px;
        right: 45px;
      }
      #text-retake-moment {
        width: 500px;
        position: relative;
        right: 12%;
      }
    }
  }
}

Answer 1

您需要做的是关闭初始 .container (持有 Logo )打开一个带有自定义类的新 div，使您能够对其进行样式设置(给它白色背景)，打开一个新的 .container并拥有你的英雄内容。完成后，关闭 .container再次关闭 .white-bg , 重新打开 .container并继续页面。

.white-bg {
  background-color: white;
}

<div class="theme-landingpage-main">
  <div class="container">
    <div class="row">
      <div class="col m12 l12 s12 layout-header">
        <p class="headertitle">MELLOW<br /> MOMENT</p>
      </div>
    </div>
  </div> <!-- closed container -->
  <div class="white-bg"> <!-- full width -->
    <div class="container"> <!-- new container -->
      <div class="row layout-hero">
        <div class="col s12 m6 l6 module-hero-picture-badge">
          <img id="badge" src="app/assets/img/login/badge.png" alt="">
          <img id="boxhero" src="app/assets/img/login/boxhero.png" alt="">
        </div>
        <div class="col s12 m6 l6 module-hero-text">
          <img id="text-chill-banner" src="app/assets/img/login/banner.png" alt="">
          <img id="talking-to-you" src="app/assets/img/login/text-talking-to-you.png" alt="">
          <p>Take your life back. Breathe. Take stock of yourself. You need a break. Take one.<br>
            Focus your mind. Relax your body.<br></p>
          <p style="font-family: 'Raleway', sans-serif !important; font-weight: 400 !important; font-style: italic;">(and Take a Toke).</p>
          <img id="text-retake-moment" src="app/assets/img/login/moment-text.png" alt="">
          <img class="shop-button" src="app/assets/img/login/shopbut.png" alt="">
        </div>
      </div>
    </div> <!-- closed container -->
  </div> <!-- closed white-bg -->
  <div class="container">
    Some other content, in container...
  </div>
</div>

旁注:我注意到您嵌套了 <p>标签。那是无效的 HTML并且会导致渲染问题。大多数浏览器将关闭初始 <p>在打开一个新的之前标记，留下你的结尾 </p>孤儿。有时这没有任何可见的效果，但它有可能破坏页面或导致难以跟踪/修复的 错误。