Bootstrap 3.0 - Grille fluide comprenant des tailles de colonne fixes

Question

Je suis en train d'apprendre comment utiliser Bootstrap. Actuellement, je suis à gué mon chemin à travers les mises en page. Alors que le Bootstrap est assez cool, tout ce que je vois semble daté. Pour la vie de moi, j'ai ce que je pense est une base de mise en page que je ne peux pas comprendre. Ma mise en page se présente comme suit:

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

Cette grille doit prendre toute la hauteur de la fenêtre. De ma compréhension, j'ai besoin de mélange fixe et fluide largeurs. Cependant, Bootstrap 3.0 ne semble pas avoir la classe fluide plus. Même si elle l'a fait, je n'arrive pas à comprendre comment le mélange de liquide et de colonne fixe tailles. Personne ne sait comment faire cela dans le Bootstrap 3.0?

Merci

Answer 1

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

Vous devez insérer une marge de remplissage à gauche sur la ligne racine, puis créer une ligne enfant contenant vos éléments de disposition de grille habituels.

Voici comment je fais habituellement cela http://jsfiddle.net/yo8od0qa/

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

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

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

Answer 2

Il n’ya vraiment pas de moyen facile de mélanger des largeurs fixes et fluides avec Bootstrap 3. C’est ce qu’il faut faire, 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 tente de faire, dans le but de faire en sorte que cette disposition s'applique à différents types d'appareils.

Si vous devez vous en tenir à cette mise en page, je vous conseillerais d'agencer votre page avec du CSS personnalisé et de ne pas utiliser la grille.

Answer 3

ou utilisez la propriété display 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/

Answer 4

Mise à JOUR 2014-11-14: La solution ci-dessous est trop vieux, je recommande l'utilisation de flex zone de méthode de présentation. En 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 modifier trop de bootstrap mise en page de code.

---

Mise à jour (pas de l'OP): ajout de l'extrait de code ci-dessous pour faciliter la compréhension de cette réponse. Mais il 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>

Answer 5

Pourquoi ne pas simplement définir un fixe avec les deux colonnes de gauche dans votre propre css, puis créer une nouvelle présentation de 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>