Как можно выйти за рамки контейнера Bootstrap?

Question

[Muvka]

Здравствуйте. Нужно сделать фон, начинающийся у левой границы контейнера bootstrap, идущий за пределы границы контейнера вправо до края страницы. Подскажите, правильно ли будет сделать это таким способом: назначить контейнеру :after, абсолютно позиционировать его, и задать такие параметры left: 0, right: -9999px? И к body применить overflow-x: hidden? Или есть более изящный способ?

Answer 1

[iBird Rose]

более изящный способ - это разделить контейнер.

<div class="container">111</div>
<div class="your-div">111</div> //блок будет шириной в 100%
<div class="container">111</div>

Comments

[Muvka]

Если честно, немного не понял. Мне нужно, чтобы фон был внутри контейнера и шел до края экрана с одной стороны.

[iBird Rose]

Muvka, тогда выводить за экран все же лучше левую сторону, а не правую. тогда не нужно будет для body писать overflow. т.е. заливаешь весь блок фоном. а для левой части через after возвращаешь белый фон к примеру.

Answer 2

[Михаил Лисецкий]

<div class="container">
  <!-- Content here -->
</div>
<div class="container-fluid">
  ...
</div>
<div class="container">
  <!-- Content here -->
</div>

Comments

[Muvka]

Мне именно надо в самом контейнере. В OpenCart, например модули выводятся в контейнере. И если не расковыривать код, то просто так там container-fluid не добавить.