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>

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

Answer 1

96

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

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

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

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

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

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

css twitter-bootstrap width user1589214
источник

Не могли бы вы включить код, с которым работаете? Без этого все, что я могу сказать, это то, что вам нужно будет убедиться, что для тегов, содержащих 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,

Answer 2

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

Майкл Петерсон,

Answer 3

Привет, Майкл, спасибо за ответ. Вот фрагмент кода, с которым я работаю:

<div class="container">            <div class="row">       	<div class="span12"><img src="img/logo.png" width="960px"></center></div>            <div class="block">content</div>

user1589214,

Answer 4

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>

Answer 5

1

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

netAction

Answer 6

1

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

Чарли

Answer 7

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

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

Answer 8

3

Действительно, похоже, что «ни один из контейнеров не является вложенным» getbootstrap.com/css/#overview-container , поэтому ожидайте здесь нескольких проблем (но я все равно буду использовать ваше решение, я думаю).

Thibaut Barrère

Answer 9

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

Dev

Answer 10

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

Использование множественного не вложен .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/

Answer 11

1

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

Volksman

Answer 12

Этот пример с jumbotron снял все мои вопросы.

Александр Ким

Answer 13

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

RubbelDeCatc

Answer 14

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;
}

Benedex82
источник

3

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

Typhlosaurus

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

drooh

Answer 15

3

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

Typhlosaurus

Answer 16

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

drooh

Answer 17

18

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

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

Дина
источник

Лучший ответ, если вы используете Bootstrap 4

Alexander G

Answer 18

Лучший ответ, если вы используете Bootstrap 4

Alexander G

Answer 19

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

Answer 20

2

Вместо того

style="width:100%"

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

class="col-xs-12"

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

Евгений Афанасьев
источник

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

Хартли Броуди

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

Евгений Афанасьев

Answer 21

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

Хартли Броуди

Answer 22

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

Евгений Афанасьев

Answer 23

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

Answer 24

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

Metro Smurf,

Answer 25

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

Answer 26

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

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

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

Answer 27

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

Answer 28

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

Answer 29

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

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

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

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

Ответы:

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

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

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

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

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