Подтвердить что ты не робот

Элемент Bootstrap 100% Ширина

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

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

http://i.imgur.com/aiEMJ.jpg

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

http://i.imgur.com/3Sl27.jpg

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Класс 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>

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

Ответ 2

Вот как вы можете достичь желаемой настройки с помощью 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 гарантирует, что ваш контент все еще будет обернут фиксированной шириной.

Этот подход работает, но лично мне не нравится все гнездование. Тем не менее, я пока не нашел лучшего решения.

Ответ 3

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

  • Используйте несколько НЕ НАЗНАЧЕННЫХ .container s
  • Оберните те .container, что вы хотите иметь полноразмерный фон в div
  • Добавить фон CSS в обертку div

Fiddles: Простой: 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 имеет некоторую фиксированную ширину, она также автоматически центрируется по горизонтали.
Так что нет никакой разницы, укажите ли вы это как:

  • Прямой ребенок тела
  • Прямой дочерний элемент basic div, который является прямым дочерним элементом тела.

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

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

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

Ответ 4

Существует обходное решение, использующее 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;
}

Ответ 5

Если вы не можете изменить макет 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

Ответ 6

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

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

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

Ответ 7

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

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

<div id="body">

    @RenderSection("featured", required: false)

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

На моей странице "Главная страница" у меня было фоновое изображение заголовка, которое я хотел бы заполнить всю ширину экрана, поэтому решение заключалось в том, чтобы сделать 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>

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

Ответ 8

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

Ответ 9

Следующий ответ не совсем оптимален по какой-либо мере, но мне нужно что-то, что поддерживает его положение внутри контейнера, пока оно полностью растягивает внутренний 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"
            });
        });
    }
});

Ответ 10

Вместо

style="width:100%"

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

class="col-xs-12"

он сохранит вам 1 символ:)