Контейнер BootStrap 3 внутри контейнер-жидкость

Ниже приведен макет, в котором я работаю над использованием BootStrap3. У меня есть пример установки с ограниченным макетом для этого вопроса на http://jsfiddle.net/s7Rwj/4

Мне сложно настроить заголовок. Я использую ширину контейнера-жидкости, поэтому ширина заголовка 100%, но спросите, что из трех элементов внутри заголовка один должен оставаться слева, а остальные два должны совпадать соответственно слева и справа от "контейнера".

До сих пор я пробовал различные макеты, но ниже это единственное, что близко к тому, что я ищу.

    <header class="container-fluid navbar-fixed-top">
        <div class="row">
            <div class="col-xs-12" style="background-color:aliceblue">                    
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6" style="background-color:violet">2</div>
                        <div class="col-xs-6 pull-right" style="background-color: lightblue">3</div>
                    </div>
                </div>
                <span style="position:absolute;top:0;left:0">
                    A quick brown fox jumps over the lazy dog.
                </span>
            </div>
        </div>
    </header>

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

Если я не использую абсолютную позицию, тогда диапазон и остальные элементы отображаются в двух разных строках.

Я ищу совет по настройке этого заголовка.

PS: Я добавил случайные цвета фона в тег div, чтобы понять, где они отображаются. Не стесняйтесь их игнорировать.

Ответы

Ответ 1

Я думаю, вы ищете трудности там, где они не являются.

Вам следует избегать вложенных контейнеров (.container и .container-fluid), потому что они не являются гнездовыми из-за их заполнения и т.д. посмотрите обзор Bootstrap 3 Containers

Кроме того, когда вы вставляете столбцы, все, что вам нужно сделать, это поместить новую строку в один из столбцов и поместить в нее вложенные столбцы. См. Bootstrap 3 Grid system - вложенные столбцы, вот их пример:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Решение, которое вы ищете, с макетом очень просто. В заголовке вам необязательно нужна жидкость-контейнер. Просто создайте контейнер для центральной части над карусели и оберните его в .wrap или любой другой класс, который вы можете стилизовать по ширине: 100%. Кроме того, вы можете добавить некоторые дополнения, которые имеют контейнер-жидкость.

<header class="wrap navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-6" style="background-color: violet;">2</div>
            <div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
        </div>
        <span style="position:absolute;top:0;left:0">
            A quick brown fox jumps over the lazy dog.
        </span>
    </div>
</header>

И где-то в вашем CSS (я рекомендую style.less), вы можете стилить .wrap до 100% ширины, хотя это должна быть ширина по умолчанию для каждого div без стилей.

.wrap {
    width: 100%;
}

Я знаю, что этот вопрос немного старше, но это не имеет значения. Надеюсь, я правильно понял ваш вопрос.

Ответ 2

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

Просто добавьте что-то подобное в таблицу стилей:

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

Тем не менее, я думаю, что то, что вы пытаетесь, может быть решено путем добавления некоторого дополнения к первому столбцу в контейнерной жидкости. Чтобы сделать его мобильным, добавьте это дополнение в медиа-запрос в точке останова, где текст начинает перекрываться. Это не самый красивый способ сделать это, но как я подхожу к нему, учитывая то, что вы пытаетесь выполнить.

<header class="container-fluid navbar-fixed-top">
    <div class="row">
        <div class="col-xs-12" style="background-color:aliceblue; padding-top:30px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">2</div>
                    <div class="col-xs-6" style="background-color: lightblue">3</div>
                </div>
            </div> 
            <span style="position:absolute;top:0;left:0">
                        Some text
            </span>
        </div>
    </div>
</header>

LINK: http://jsfiddle.net/udLbLwh6/

Ответ 3

Я считаю, что вложенные контейнеры прекрасно подходят. Пока вы удаляете прокладку на контейнере внутри .container-fluid (.container-fluid.container {padding: 0;}), то что еще не все в порядке?