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


96

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

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

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

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

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

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

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

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


Не могли бы вы включить код, с которым работаете? Без этого все, что я могу сказать, это то, что вам нужно будет убедиться, что для тегов, содержащих div, не задана ширина, отличная от 100%,
Майкл Петерсон,

Привет, Майкл, спасибо за ответ. Вот фрагмент кода, с которым я работаю: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
user1589214,

Ответы:


78

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>

1
.row нужен .container или в данном случае .container-fluid.
netAction

1
Если вы используете старую версию таблицы стилей начальной загрузки, container-fluidпоявится горизонтальная полоса прокрутки. Чтобы исправить это, добавьте это в свою таблицу стилей.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Чарли

29

Вот как вы можете добиться желаемой настройки с помощью 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
Действительно, похоже, что «ни один из контейнеров не является вложенным» getbootstrap.com/css/#overview-container , поэтому ожидайте здесь нескольких проблем (но я все равно буду использовать ваше решение, я думаю).
Thibaut Barrère

Однако стоит отметить, что класс container-fluid недоступен в bootstrap 3.0, но доступен в 3.1 и выше
Dev

29

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

  1. Использование множественного не вложен .container s
  2. Оберните те элементы, которые .containerвы хотите получить на всю ширину фона, вdiv
  3. Добавьте 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имеет фиксированную ширину, она также автоматически центрируется по горизонтали.
Так что нет никакой разницы, поставили ли вы это как:

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

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

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

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


1
Этот ответ очень тщательный и непреклонный, что вложение контейнеров внутри других контейнеров - это «очень плохая идея» (например, «пересечение потоков» в «Охотниках за привидениями»), и он указывает на ссылку на веб-сайт Bootstrap, подтверждающую это. Включение контейнера в простой div - это предложение, и тот факт, что Boostrap использует эту технику в своем примере Jumbotron, говорит мне, что jave.web сегодня победитель!
Volksman

Этот пример с jumbotron снял все мои вопросы.
Александр Ким

Иногда невозможно закрыть контейнер и открыть новый полный контейнер. Обходной путь. В следующем ответе лучше!
RubbelDeCatc

21

Есть обходной путь с использованием 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;
}

3
Это очень близко к идеальному ответу, который не требует изменения общего макета страницы и иногда будет достаточным, однако есть тонкие проблемы с полосами прокрутки. .Row-full заполнит все окно, игнорируя полосы прокрутки, в отличие от контейнера-жидкости, который заполняет все окно с полосами прокрутки или без них, в зависимости от того, является ли полоса прокрутки непрозрачной.
Typhlosaurus

Вау. Js сделал свое дело, я часами искал решение. Моя проблема в том, что контент вводится в cms и поэтому не может изменить внешний html. На самом деле хотел бы знать, есть ли решение без js.
drooh


6

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


2

Вместо того

style="width:100%"

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

class="col-xs-12"

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


Этот ответ - не то, о чем просил OP. Это создаст столбец, равный полной ширине внешнего .containerdiv, но это не то же самое, что полная ширина страницы в браузере, о чем и задается вопрос.
Хартли Броуди

Я не вижу, чтобы OP запросил «полную ширину страницы в браузере». Как вы это понимаете?
Евгений Афанасьев

2

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


С Bootstrap 4 это, безусловно, лучший ответ. Ура!
Metro Smurf,

1

Извините, я должен был попросить и ваш 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/


0

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

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

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


0

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


0

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

0

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.