Игнорирование полей CSS для встроенных DIV

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-нижний колонтитул, с полем: auto):

Я хочу (визуально, используя 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 и не использовать контейнерную жидкость для переноса слайдера.

Было бы лучше (imho) использовать теги HTML для таких элементов, как <header> <main> <footer>

Таким образом, структура будет

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