web-dev-qa-db-fra.com

Bootstrap 4 layout avec colonne d'une largeur fixe

c'est mon code html:

<div class="container-fluid d-flex h-100">
  <div class="white h-100" style="background-color: white;">
    fixed 100px
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
  <div class="col-6 red h-100" style="background-color: red;">
    6
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
</div>

Pouvez-vous m'aider à réparer mon code s'il vous plaît? J'ai besoin de la colonne de gauche avec une largeur fixe, qui aura 100px. Cette colonne n'a pas été redimensionnée. Le reste de l'espace dont j'ai besoin devrait pouvoir être ajusté dynamiquement dans un rapport de 1: 2: 1. Merci pour l'aide.

htmlcsstwitter-bootstrap
6
Denis Stephanov

@ Denis Stephanov, vous pouvez créer un élément flexible qui ne se contracte pas et ne grossit pas et dont la largeur est fixe, avec la règle css suivante:

.flex-fixed-width-item {
    flex: 0 0 100px;
}

C'est le raccourci pour flex-grow, flex-shrink et flex-basis. Vous pouvez en savoir plus sur ces propriétés dans cet article Article sur CSS-Tricks .

Ajout de cette classe à votre colonne de largeur fixe:

<div class="container-fluid d-flex h-100">
  <div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
    fixed 100px
  </div>
  ...

Ensuite, conservez le même ratio de colonne:

  ...
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
  <div class="col-4 red h-100" style="background-color: red;">
    4
  </div>
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
</div>

Vous obtiendrez le résultat souhaité que vous pourrez visualiser dans ce projet codeply .

6
Jade Cowan

Il existe une solution intégrée dans bootstrap 4.

Essaye ça;

<div class="container">
    <div class="row">
        <div class="col-12 col-md">
            content
        </div>
        <div class="col-12 col-md-auto">
            <div style="background: red; width: 300px;">
                sidebar
            </div>
        </div>
    </div>
</div>

Démo: https://www.bootply.com/WiegnnJbxX

9
merkjs

Bootstrap 4 a cela intégré dans leurs composants de mise en page.

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

Référence: https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

Si vous souhaitez que votre colonne de largeur définie ait une largeur de pixel fixe, vous pouvez omettre .col-4 et ajouter une classe de largeur de pixel personnalisée.

<div class="container">
  <div class="row">
    <div class="col-pixel-width-100">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

// style.css
.col-pixel-width-100 { flex: 0 0 100px; }
2
Solvitieg