100% ширина элемента Bootstrap

Question 1

Я хочу создать чередующиеся блоки 100% цвета. «Идеальная» ситуация иллюстрируется как привязанность, так и текущая ситуация.

Желаемая настройка:

В настоящее время:

Моей первой идеей было создать класс div, присвоить ему цвет фона и дать ему 100% ширину.

.block {
    width: 100%;
    background: #fff;
}

Однако вы можете видеть, что это явно не работает. Он ограничен контейнерной зоной. Я попытался закрыть контейнер, но это тоже не помогло.

Question 2

containerКласс намеренно не 100% ширины. Это различная фиксированная ширина в зависимости от ширины области просмотра.

Если вы хотите работать с полной шириной экрана, используйте .container-fluid:

Бутстрап 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Бутстрап 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

Вот как вы можете добиться желаемой настройки с помощью Bootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

container-fluidЧасть гарантирует , что вы можете изменить фон по всей ширине. Эта containerчасть гарантирует, что ваш контент по-прежнему имеет фиксированную ширину.

Такой подход работает, но лично мне не нравится вся эта вложенность. Однако лучшего решения я пока не нашел.

Question 4

БЫСТРЫЙ ОТВЕТ

Использование множественного не вложен .container s
Оберните те элементы, которые .containerвы хотите получить на всю ширину фона, вdiv
Добавьте CSS-фон в обертку div

Скрипки: просто: https://jsfiddle.net/vLhc35k4/ , границы контейнера: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

НЕ ИСПОЛЬЗУЙТЕ ВЛОЖЕННЫЕ КОНТЕЙНЕРЫ

Многие люди ( ошибочно ) предложат вам использовать вложенные контейнеры.
Ну, вы должны НЕ .
Они не подлежат вложению. (См. Раздел « Контейнеры » в документации)

КАК ЭТО РАБОТАЕТ

div- это блочный элемент, который по умолчанию занимает всю ширину тела документа - есть функция полной ширины. Он также имеет высоту своего содержимого (если вы не укажете иное).

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

Если основная сетка .containerимеет фиксированную ширину, она также автоматически центрируется по горизонтали.
Так что нет никакой разницы, поставили ли вы это как:

Прямой дочерний элемент тела
Прямой дочерний элемент основного, div то есть прямой дочерний элемент тела.

Под «базовым» divя подразумеваю, divчто CSS не изменяет его границу, отступы, размеры, положение или размер содержимого. На самом деле просто HTML-элемент с display: block;CSS и, возможно, фоном.
Но, конечно, установка вертикального CSS (height, padding-top, ...) не должна нарушать сетку начальной загрузки :-)

Сам бутстрап использует тот же подход

... На всем его собственном веб-сайте и в примере "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

Question 5

Есть обходной путь с использованием vw. Полезно, когда вы не можете создать новый контейнер для жидкости. Это внутри классического «контейнерного» div будет полноразмерным.

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

После этого возникает проблема с боковой панелью (спасибо @Typhlosaurus), решаемая с помощью этой js-функции, вызывающей ее при загрузке документа и изменении размера:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

В начальной загрузке 4 вы можете использовать класс w-100 (w как ширина, а 100 как 100%)

Вы можете найти документацию здесь: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

Если вы не можете изменить макет HTML:

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

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Демо: http://www.bootply.com/tVkNyWJxA6

Question 8

Вместо того

style="width:100%"

попробуйте использовать

class="col-xs-12"

это сэкономит вам 1 символ :)

Question 9

Иногда невозможно закрыть контейнер содержимого. Решение, которое мы используем, немного отличается, но предотвращает переполнение из-за размера полосы прокрутки Firefox!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Вот пример: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

Извините, я должен был попросить и ваш css. Как есть, в основном вам нужно обратить внимание на то, чтобы дать вашему контейнеру div стиль .container { width: 100%; }в вашем css, а затем вложенные div унаследуют его, если вы не укажете им собственную ширину. Вам также не хватало нескольких закрывающих тегов, а </center>закрывающий<center> элемента, который никогда не открывался, по крайней мере, в этом разделе кода. Я не был уверен, нужно ли вам изображение в том же блоке div, который содержит ваш контент, или отдельно, поэтому я создал два примера. Я изменил ширину img на 100 пикселей просто потому, что jsfiddle предлагает небольшую область просмотра. Сообщите мне, если это не то, что вы ищете.

содержимое и изображение отдельно: http://jsfiddle.net/QvqKS/2/

содержимое и изображение в том же div (img плавает слева): http://jsfiddle.net/QvqKS/3/

Question 11

Мне интересно, почему кто-то пытается «переопределить» ширину контейнера, поскольку его цель - сохранить его содержимое с некоторым заполнением, но у меня была аналогичная ситуация (вот почему я хотел поделиться своим решением, хотя есть ответы ).

В моей ситуации я хотел, чтобы весь контент (всех страниц) отображался внутри контейнера, поэтому это был фрагмент кода из моего _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

На моей странице Home Index у меня было фоновое изображение заголовка, которое я хотел бы заполнить по всей ширине экрана , поэтому решение заключалось в том, чтобы сделать Index.cshtml следующим образом:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

Я думаю, что это лучше, чем пытаться найти обходные пути, поскольку разделы создаются с целью разрешить (или заставить) представления динамически заменять некоторый контент в макете.

Question 12

Хотя люди упоминали, что в этом случае вам нужно будет использовать .container-fluid, но вам также придется удалить заполнение из начальной загрузки.

Question 13

Следующий ответ не совсем оптимален по любым меркам, но мне нужно было что-то, что сохраняло бы свое положение в контейнере, пока оно полностью растягивало внутренний div.

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

Я бы использовал два отдельных div-контейнера, как показано ниже:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Помните, что контейнер-жидкость не следует вашим точкам останова, и это контейнер полной ширины.