Переопределить ширину контейнера бутстрапа

У меня есть простой HTML-шаблон с использованием bootstrap 3. Шаблон имеет следующую структуру: статический заголовок, статический нижний колонтитул и содержимое, которое находится в классе загрузки "Контейнер". В середине контента у меня есть bootstrap'w "Ну", и я хочу, чтобы он выглядел как верхний и нижний колонтитулы. Я имею в виду, что я хочу, чтобы это была полная ширина экрана на любом экране.

Я создал легкий fiddle.

Вот вопрос, есть ли способ переопределить ширину контейнера внутри этого контейнера?

<header>
   <div class="container">
      <div class="content">

      </div>
      <div class="well">

      </div>
      <div class="content">

      </div>
   </div>
<footer>

enter image description here

Ответы

Ответ 1

ОРИГИНАЛ + ЛУЧШАЯ ПРАКТИКА: всегда перемещайте .well за пределы .container, чтобы оставаться идиоматичным с Bootstrap.

ОБНОВЛЕНИЕ + ЕСЛИ ВЫШЕ - НЕ ВАРИАНТ: Учитывая, что вы не можете легко изменить стили .container и/или переместить .well за пределы .container, лучшим вариантом будет JavaScript. Здесь я создал скрипт, который расширяет .well при изменении ширины окна.

Вот jsFiddle

Идея состоит в том, что вы хотите получить отрицательное значение для margin-left и margin-right, чтобы .well расширялся по экрану.

Ответ 2

У div container есть следующий max-width, указанный в медиа-запросе как по умолчанию при загрузке.

@media (min-width: 768px){
  .container{
    max-width:750px;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:970px;
  }
}

Чтобы переопределить это, добавьте стиль ниже в таблицу стилей

//Это должно быть добавлено в стилях по умолчанию, а не в медиа-запросе  .контейнер{     Маржа: 0;     обивка: 0;  }

@media (min-width: 768px){
  .container{
    max-width:100%;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:100%;
  }
}

Ответ 3

Здесь есть более простой трюк, который работает как шарм: https://css-tricks.com/full-width-containers-limited-width-parents/

Ищите: "Не требуется calc()"

HTML

<header>
    <div class="container">
        <div class="content"></div>
        <div class="well full-width"></div>
        <div class="content"></div>
    </div>
    <footer>

CSS

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}