Ответ 1

- Еще одно обновление -

Так как Twitter Bootstrap версии 2.0 - который видел удаление класса .container-fluid - не удалось реализовать двухстоечный макет с фиксированной жидкостью, используя только классы начальной загрузки, однако я обновил свой ответ на включите некоторые небольшие изменения CSS, которые могут быть сделаны в вашем собственном CSS-коде, который сделает это возможным

Можно реализовать структуру с фиксированной текучестью с использованием CSS, найденного ниже, и слегка измененного HTML-кода, взятого из бутстрапа Twitter Леса: макеты:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Я сохранил ответ ниже - даже несмотря на то, что редактирование для поддержки 2.0 сделало его жидкостно-жидкостным решением, так как оно объясняет концепции, делающие боковую панель и контент одинаковой высоты (значительная часть вопроса афер, как указано в комментарии)

Внимание!

Ответ ниже - текучая среда

Обновление Как отметил @JasonCapriotti в комментариях, исходный ответ на этот вопрос (созданный для v1.0) не работал в Bootstrap 2.0. По этой причине я обновил ответ для поддержки Bootstrap 2.0

Чтобы гарантировать, что основное содержимое заполняет не менее 100% высоты экрана, нам нужно установить высоту html и body на 100% и создать новый класс css под названием .fill, который имеет минимальная высота 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

Затем мы можем добавить класс .fill к любому элементу, который должен взять 100% высоты sceen. В этом случае мы добавим его в первый div:

<div class="container-fluid fill">
    ...
</div>

Для обеспечения того, что столбцы боковой панели и содержимого одинаковой высоты очень сложны и не нужны. Вместо этого мы можем использовать псевдоселектор ::after, чтобы добавить элемент filler, который даст иллюзию, что два столбца имеют одинаковую высоту:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Чтобы убедиться, что элемент .filler расположен относительно элемента .fill, нам нужно добавить position: relative в .fill:

.fill { 
    min-height: 100%;
    position: relative;
}

И, наконец, добавьте стиль .filler в HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Примечания

Если вам нужен элемент слева от страницы для заполнения, вам нужно изменить right: 0 на left: 0.

Ответ 2

Обновление 2017

Bootstrap 3..

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

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Рабочий бутстрап 3 Фиксированная жидкость Демо

Bootstrap 4

Теперь, когда BS4 является flexbox, фиксированная жидкость проста. Просто установите ширину фиксированного столбца и используйте класс .col в столбце текучей среды.

http://www.codeply.com/go/7LzXiPxo6a

Ответ 3

Принятый ответ кажется текучим. Вот ответ, который на самом деле является фиксированной жидкостью:

fooobar.com/info/55979/...

Как построить компоновку с 2 колонками (фиксированная - жидкость) с помощью бутстрапа Twitter?

Ответы