Bootstrap 3.0 - Fluid Grid qui comprend des tailles de colonnes fixes

J'apprends à utiliser Bootstrap. Actuellement, je me fraye un chemin à travers les mises en page. Bien que Bootstrap soit plutôt cool, tout ce que je vois semble daté. Pour la vie de moi, j'ai ce que je pense être une mise en page de base que je ne peux pas comprendre. Ma mise en page ressemble à ceci:

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

Cette grille doit prendre toute la hauteur de la fenêtre. D'après ce que j'ai compris, j'ai besoin de mélanger des largeurs fixes et fluides. Cependant, Bootstrap 3.0 ne semble plus avoir la classe fluide. Même si c'était le cas, je n'arrive pas à comprendre comment mélanger des tailles de colonnes fluides et fixes. Est-ce que quelqu'un sait comment faire cela dans Bootstrap 3.0?

Il n'y a vraiment pas de moyen facile de mélanger des largeurs fluides et fixes avec Bootstrap 3. C'est censé être comme ça, car le système de grille est conçu pour être fluide et réactif. Vous pouvez essayer de pirater quelque chose, mais cela irait à l'encontre de ce que le système Responsive Grid essaie de faire, dont le but est de faire circuler cette disposition sur différents types d'appareils.

Si vous devez vous en tenir à cette mise en page, j'envisagerais de mettre en page votre page avec du CSS personnalisé et de ne pas utiliser la grille.

edit: Comme beaucoup de gens semblent vouloir faire cela, j'ai rédigé un petit guide avec un cas d'utilisation plus général ici https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . J'espère que ça aide.

Le système de grille bootstrap3 prend en charge l'imbrication de lignes qui vous permet d'ajuster la ligne racine pour permettre des menus latéraux à largeur fixe.

Vous devez mettre un padding-left sur la ligne racine, puis avoir une ligne enfant qui contient vos éléments de disposition de grille normaux.

Voici comment je fais habituellement cela 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;
}

ou utilisez la propriété d'affichage avec table-cell;

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/

J'ai eu un problème légèrement différent:

• J'avais besoin de combiner des colonnes fixes et fluides dans le cadre d'un tableau plutôt que dans le cadre d'une mise en page pleine fenêtre
• J'avais besoin d'avoir des colonnes fixées à la fois à gauche et à droite
• Je n'étais pas inquiet pour les arrière-plans des colonnes en utilisant la pleine hauteur de la ligne contenant

En conséquence, j'ai eu recours à floatpour les colonnes gauche et droite, et j'ai ensuite pu utiliser Bootstrap rowpour faire les colonnes fluides entre les deux.

<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>

Mise à jour 2018

OMI, la meilleure façon d'aborder cela dans Bootstrap 3 serait d'utiliser des requêtes multimédias qui s'alignent sur les points d'arrêt de Bootstrap afin que vous n'utilisiez que les colonnes à largeur fixe pour des écrans plus grands, puis laissez la mise en page s'empiler de manière réactive sur des écrans plus petits. De cette façon, vous gardez la réactivité ...

@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 aura une flexbox donc des mises en page comme celle-ci seront beaucoup plus faciles: http://www.codeply.com/go/eAYKvDkiGw

OK, ma réponse est super sympa:

<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>

aire de jeux jsfiddle

si vous souhaitez prendre en charge tous les navigateurs, utilisez https://github.com/10up/flexibility

MISE À JOUR 14/11/2014: La solution ci-dessous est trop ancienne, je recommande d'utiliser la méthode de mise en page de la boîte flexible. Voici un aperçu: http://learnlayout.com/flexbox.html

Ma solution

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;
  }
}

Sans trop modifier le code de mise en page bootstrap.

Mise à jour (pas depuis OP): ajout d'un extrait de code ci-dessous pour faciliter la compréhension de cette réponse. Mais cela ne semble pas fonctionner comme prévu.

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>

Pourquoi ne pas simplement définir les deux colonnes de gauche sur un fixe avec dans votre propre css, puis créer une nouvelle disposition en grille des 12 colonnes complètes pour le reste du contenu?

<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>