在引导程序 4.5 中设置 100% 的视口宽度

Question

我正在尝试在容器中使用 class='row' 获得 100% 的宽度

HTML 结构：

<div class="container"><!-- this is main container holding overall contents dont want to remove it -->
    <div class='row w-100 bg-dark' id='heading'>
      <h2>some headings</h2>
    </div>
    <article></article>
    <aside></aside>
    <footer></footer>
</div>

id='heading' 的行没有扩展到 100% 宽度，因为它在容器类中，我使用了布局实用程序 w-100，但它不起作用。

如何强制此 div 扩展至 100% 但仍保留在容器中？

Answer 1

试试这个，将两者分开并在container-fluid中添加标题

<article>
  <div class="container-fluid">
    <div class="row no-gutters" id="heading">
      <div class="col">
        <h2>some headings</h2>
      </div>
    </div>
  </div>
  <div class="container">
    <article></article>
    <aside></aside>
    <footer></footer>
  </div>
</article>

article 只是一个包装，所以你可以看到。

---

编辑：

使用绝对定位从容器中拉出标题，不理想，可能会导致其他问题，但它是一种选择

.container {
  display: block;
  width: 100%;
  max-width: 200px;
  background-color: red;
  margin: 0 auto;
}

article {
  margin-top: 65px
}

#heading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color:green;
}

<div class="container">
  <div id='heading'>
    <h2>some headings</h2>
  </div>
  <article>Lorum ipsum</article>
  <aside>Lorum ipsum</aside>
  <footer>Lorum ipsum</footer>
</div>