Расположение жидкости Bootstrap - фиксированная ширина боковой панели - PullRequest
10 голосов
/ 06 марта 2012

У меня плавный макет, основанный на начальной загрузке твиттеров.

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span2">
           <!--Sidebar content-->
       </div>
       <div class="span10">
           <!--Body content-->
       </div>
    </div>
</div>

Было бы очень неплохо иметь боковую панель фиксированной ширины.если изменить макет с жидкого на «статический» и установить ширину боковой панели на

220px

и изменить размер окна или изменить свое разрешение на 1024 ... содержимое тела переместится под боковую панель.Как я могу избежать этого?

РЕДАКТИРОВАТЬ: Понял.Опубликую свое «решение» позже.спасибо за ваши ответы

Ответы [ 2 ]

29 голосов
/ 06 марта 2013

Я думаю, вы выглядите примерно так:

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

вот вам скрипка для вашего удобства: http://jsfiddle.net/TT8uV/2/

Как общее примечание:

Вам не нужно использовать bootstrap в качестве «основного контейнера», поэтому вы можете разместить боковую панель рядом с сеткой (например, жидкостью начальной загрузки и отзывчивой).Таким образом, вы получаете A LOT контроля над боковой панелью, не влияя на фактическое содержание.

Надеюсь, это работает для вас.

8 голосов
/ 07 марта 2012

Я думаю, это то, что вам нужно: http://jsfiddle.net/U8HGz/1/

...