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>

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

1 个答案: