Елемент завантажувального ремінця 100% ширина

96

Я хочу створити чергуються 100% кольорові блоки. "Ідеальна" ситуація ілюструється як прихильність, а також поточна ситуація.

Бажане налаштування:

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

В даний час:

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

Моєю першою ідеєю було створити клас div, надати йому колір тла та надати 100% ширини.

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

Однак ви бачите, що це, очевидно, не працює. Це обмежується контейнерною зоною. Я намагався закрити контейнер, і це теж не спрацювало.

css  twitter-bootstrap  width 
— користувач1589214
джерело
Не могли б ви включити код, з яким працюєте? Без цього все, що я можу сказати, це те, що вам потрібно було б переконатися, що містять теги для 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:

Bootstrap 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>
— Росс Аллен
джерело
1
.row потрібен .контейнер або в цьому випадку .container-fluid.
— netAction
1
Якщо ви використовуєте стару версію таблиці стилів bootstrap, це 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 , тому очікуйте тут кілька питань (але я все одно буду використовувати ваше рішення, я думаю).
— Тібо Баррер
Варто зазначити, що клас "контейнер-рідина" недоступний у bootstrap 3.0, але доступний 3.1 і вище
— Dev
29

ШВИДКИЙ ВІДПОВІДЬ

  1. Використовуйте декілька NOT NESTED .container s
  2. Оберніть ті, .containerу кого ви хочете мати фон на всю ширину, у файлdiv
  3. Додайте фон CSS до розділу обгортання

Скрипки: Прості: 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. Прямий дитина з Basic div , який є прямим нащадком тіла.

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

Сам Bootstrap використовує той самий підхід

... Всюди це власний веб-сайт, а в прикладі "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

— jave.web
джерело
1
Ця відповідь є дуже ґрунтовною і рішучою, що вкладання контейнерів всередину інших контейнерів є "дуже поганою ідеєю" (наприклад, "погане перетинання потоків" у Ghostbusters), і він вказує на посилання на веб-сайт Bootstrap, яке це підтверджує. Включити контейнер всередину простого div - це пропозиція, і той факт, що Boostrap використовує цю техніку на своєму прикладі Jumbotron, говорить мені, що jave.web сьогодні переможець!
— Фольксман
цей приклад 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;
}
— benedex82
джерело
3
Це надзвичайно близьке до ідеальної відповіді, яка не вимагає зміни загального макета сторінки, а іноді буде достатньою, однак із смугами прокрутки є тонкі проблеми. .Row-full заповнить все вікно, ігноруючи смуги прокрутки, на відміну від рідини-контейнера, яка заповнить все вікно з смугами прокрутки або без них, залежно від того, чи смуга прокрутки непрозора.
— Тифлозавр
Ого. 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

— Seb33300
джерело
2

Замість 

style="width:100%"

спробуйте використовувати 

class="col-xs-12"

це заощадить вам 1 символ :)

— Євген Афанасьєв
джерело
Ця відповідь не те, про що просив ОП. Це створить стовпець, який є повною шириною зовнішнього .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

— RubbelDeCatc
джерело
З Bootstrap 4 це, безумовно, найкраща відповідь. На здоров’я!
— Metro Smurf
1

Вибачте, я повинен був також попросити ваш css. Як є, в основному, на що вам потрібно подивитися, це надання стилю контейнера div .container { width: 100%; }у вашому css, а потім додані div успадкують це, якщо ви не надасте їм власну ширину. Вам також не вистачало кількох закриваючих тегів, і </center>закриває a, <center>не відкриваючи його, принаймні в цьому розділі коду. Я не був впевнений, чи потрібно вам зображення в тому самому div, що містить ваш вміст, або окремо, тому я створив два приклади. Я змінив ширину img на 100px просто тому, що 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>

На моїй сторінці Домашнього індексу у мене було фонове зображення заголовка, яке я хотів би заповнити на всю ширину екрану , тому рішення було зробити 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"
            });
        });
    }
});
— adamj
джерело
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.