忽略嵌入式DIV的CSS边距

Question

我有一个经典的引导程序模板，如下所示：

<div class="container">
  <div class="row">
    <div class="col-12">
    ...header...
      <div class="carouselContainer">
      ...carousel...
      </div>
    ...content...
    </div>
  </div>
</div>

现在我的网站看起来像这样（H-页眉，S-滑块，C-内容，F-页脚，边距：自动）：

我想（在视觉上，使用CSS）像这样从div.row和div.col-12中拉出滑块。

我尝试使用position：absolute，但是在那之后，部分内容隐藏在滑块下，此外，我想在不同的屏幕分辨率下保持所有内容的安全（不使用像素，也许在最小的屏幕上轮播会被隐藏）。

有人知道怎么做吗？ （对不起，如果感到复杂，我很抱歉。）

Answer 1

尝试像这样简单地堆叠不同的.containers ...

<div class="container">
  <div class="row">
    <div class="col-12">
    ...header...
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="carouselContainer">
      ...carousel...
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
    ...content...
    </div>
  </div>
</div>

您不应嵌套.container，但可以将其堆叠！在这种情况下，container-fluid将变为全角。其他人不会。

Answer 2

为什么不更改HTML结构并使用容器流体包装滑块。

将HTML标签用于<header> <main> <footer>

这样的元素会更好（imho）

所以结构应该是

<header>
  <div class="container">
     <nav>
       Nav here
     </nav>
  </div>
</header>
<main>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="slider">
          Slider Here
        </div>
      </div>
    </div>
  </div>
  <div class="container content">
     <div class="row">
       <div class="col-12">
         Content Here
       </div>
    </div>
  </div>
</main>
<footer>
  Footer Here
</footer>