Bootstrap 3.0 - рідинна сітка, що включає фіксовані розміри стовпців

Я вчусь використовувати Bootstrap. В даний час я проходжуся по макетах. Хоча Bootstrap досить крутий, все, що я бачу, здається датованим. На все життя я маю те, що, на мою думку, є основним макетом, якого я не можу зрозуміти. Мій макет виглядає наступним чином:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Ця сітка повинна займати повну висоту вікна. З мого розуміння, мені потрібно змішати фіксовану і рідинну ширину. Однак, здається, Bootstrap 3.0 вже не має класу рідини. Навіть якщо це було, я не можу зрозуміти, як змішувати рідину та фіксований розмір стовпця. Хтось знає, як це зробити в Bootstrap 3.0?

Насправді не існує простого способу змішування рідини та фіксованої ширини з Bootstrap 3. Це повинно бути таким, оскільки сітчаста система створена як рідина, що реагує на рідини. Ви можете спробувати щось зламати, але це би суперечило тому, що намагається зробити система Responsive Grid, метою якої є перетворення цього макета на різні типи пристроїв.

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

редагувати: Оскільки багато людей, схоже, хочуть це зробити, я написав короткий посібник із більш загальним випадком використання тут https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Сподіваюся, це допомагає.

Система сітки bootstrap3 підтримує вкладку рядків, що дозволяє налаштувати кореневий рядок, щоб дозволити меню бічної фіксованої ширини.

Потрібно помістити ліворуч у нижній частині кореневого рядка, а потім мати дочірній рядок, який містить нормальні елементи компонування сітки.

Ось як я зазвичай роблю це http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

css

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

або використовувати властивість відображення з коміркою таблиці;

css

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

У мене була дещо інша проблема:

• Мені потрібно було поєднувати фіксовані та текучі стовпчики як частину таблиці, а не як частину макета з повним вікном
• Мені потрібно було встановити стовпці зліва та справа
• Мене не хвилювали фони стовпців, використовуючи повний зріст ряду, що містить

Як результат, я вдався до floatлівого і правого стовпців, а потім міг використовувати Bootstrap для того, rowщоб робити колонки з рідиною між ними.

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Оновлено 2018 рік

ІМО, найкращим способом наблизитись до цього в Bootstrap 3 було б використання медіа-запитів, які вирівнюються з точками перериву Bootstrap, щоб ви використовували лише стовпчики фіксованої ширини - більші екрани, а потім дозволяли компонуванню укладатися на менших екранах. Таким чином ви зберігаєте чуйність ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

У програмі Bootstrap 4 є flexbox, тому такі макети будуть набагато простішими: http://www.codeply.com/go/eAYKvDkiGw

Гаразд, моя відповідь дуже приємна:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

jsfiddle майданчик

якщо ви хочете підтримувати весь браузер, використовуйте https://github.com/10up/flexibility

ОНОВЛЕННЯ 2014-11-14: Рішення нижче є занадто застарілим, я рекомендую використовувати метод компонування flex box. Ось огляд: http://learnlayout.com/flexbox.html

Моє рішення

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Без зміни занадто великого коду макета завантажувальної програми.

Оновлення (не від ОП): додайте фрагмент коду нижче, щоб полегшити розуміння цієї відповіді. Але це, здається, не працює так, як очікувалося.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

Чому б просто не встановити ліві два стовпці на фіксований у своєму css, а потім зробити новий макет сітки з повних 12 стовпців для решти вмісту?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>