Bootstrap - разделить фоновый контейнер на всю ширину

Question

Это мой пример кода

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

, и у меня есть это

Но мне нужно это

Я могу достичь желаемого результата с контейнером-жидкостью, но мне нужен контейнер ...

Answer 1

Читая комментарии к вашему вопросу, почему бы не использовать класс container-liquid и создать собственный класс, который помогает ограничивать и центрировать элемент container-liquid при ширинеэкран больше указанного ( 1170px в вашем случае).Например, с таким кодом:

HTML

<div class="container-fluid custom-class">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.custom-class {
  max-width: 1170px;
  margin: 0 auto;
}

Пример :

Вы можете поиграть с изменением ширины в следующем примере и проверить, ожидаете ли вы этого.В этом примере max-width было уменьшено до 900px , чтобы вы могли визуализировать, как это работает.

https://jsfiddle.net/8bz97a1u/1/

ОБНОВЛЕНИЕ:

---

Здесь у вас есть новый пример с фоном полной ширины (который имеет два цвета) и внутренним html с фиксированной максимальной шириной (в примере 900px):

HTML

<div class="container-fluid custom-background">
  <div class="row fixed-max-width">

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.fixed-max-width {
  max-width: 900px; /* Example, but you can replace by the value you need */
  margin: 0 auto;
}

.custom-background {
  background: linear-gradient(90deg, red 50%, yellow 50%);
}

Живой пример

https://jsfiddle.net/8bz97a1u/2/