Colonne di Boostrap 4 a dimensione fissa

Mattepuffo's logo
Colonne di Boostrap 4 a dimensione fissa

Colonne di Boostrap 4 a dimensione fissa

C'è chi purtroppo non si accontenta mai di nulla, e deve rompere fino all'inverosimile.

E così mi è capitato di dover impostare delle dimensioni fisse ad una colonna della grdi di Bootstrap 4.

In sostanza, partendo da qui:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-11"></div>
        <div class="col-md-1 sx_striscia"></div>
    </div>
</div>

La colonna sx_striscia risultava troppo larga (ho cercato di fargli capire che si chiama responsive); ho quindi dovuto modificare le proprietà flex della grid e modificare un pò l'HTML.

La struttura diventa così:

<div class="container-fluid">
    <div class="row">
        <div class="col"></div>
        <div class="col sx_striscia"></div>
    </div>
</div>

Il CSS è questo:

.sx_striscia {
    -ms-flex: 0 0 77px;
    flex: 0 0 77px;
    background-color: #fff265;
}

Le cose che mi pare di capire che fondamentali sono:

  • l'uso di container-fluid e non di container
  • l'uso delle col senza estensioni

Enjoy!


Condividi

Commentami!