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