web-dev-qa-db-fra.com

Bootstrap 3.0 - Grille de fluide comprenant des tailles de colonne 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 ma vie, j'ai ce que je pense être une présentation de base que je n'arrive pas à comprendre. Ma mise en page se présente comme suit:

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

Cette grille doit occuper toute la hauteur de la fenêtre. De ma compréhension, j'ai besoin de mélanger des largeurs fixes et fluides. Cependant, Bootstrap 3.0 ne semble plus avoir la classe fluid. 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?

twitter-bootstraptwitter-bootstrap-3
124
Node Newbie

Il n'y a vraiment aucun moyen facile de mélanger des largeurs fixes et fluides avec Bootstrap 3. C'est exactement ce que vous voulez, 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.

30
Steve K.

modifier: Comme beaucoup de gens semblent vouloir le faire, j’ai rédigé un petit guide présentant 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, 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 sur la ligne racine, puis créer une ligne enfant qui contient vos éléments de disposition de grille habituels.

Voici comment je fais habituellement ceci 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;
}
151
Dean North

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/

26
Frankey

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

  • J'avais besoin de combiner des colonnes fixes et fluides dans un tableau plutôt que dans une disposition pleine fenêtre
  • J'avais besoin de colonnes fixées à gauche et à droite
  • Je ne m'inquiétais pas pour les fonds de colonne utilisant toute la hauteur de la ligne contenant

En conséquence, j’ai eu recours à float pour les colonnes gauche et droite et j’ai alors pu utiliser la méthode row de Bootstrap pour effectuer les colonnes fluidiques situées entre les colonnes.

<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>
21
Paddy Mann

Mis à jour en 2018

IMO, la meilleure façon de procéder dans Bootstrap 3 consisterait à utiliser des requêtes de média alignées sur les points d'arrêt de Bootstrap, de sorte que vous n'utilisez que les colonnes de largeur fixe qui sont des écrans plus grands, puis laissez la disposition s'empiler 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 flexbox donc les présentations de ce type seront beaucoup plus faciles: http: //www.codeply. com/go/eAYKvDkiGw

14
Zim

OK, ma réponse est super gentille:

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

si vous voulez supporter tous les navigateurs, utilisez https://github.com/10up/flexibility

3
Dariusz Filipiak

MISE À JOUR 2014-11-14: La solution ci-dessous est trop ancienne, je vous recommande d'utiliser la méthode de présentation flex box. 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 bootstrap code de mise en page.

Mise à jour (pas à partir de l'OP): ajout d'un fragment 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>
1
John Xiao