Bootstrap este una dintre cele mai rapide modalități de a iniția un proiect. Biblioteca include o mulțime de clase utile de utilitate CSS pentru a obține o primă dispunere mobilă, receptivă, care funcționează rapid.

Dar dacă începeți să adăugați propriile reguli CSS la mix, dar acestea nu par să aibă niciun efect asupra aspectului? Bootstrap vă suprascrie stilurile? Sau altceva?

De exemplu, să presupunem că doriți să măriți înălțimea unui rând și, de asemenea, să redimensionați și să imaginați.

Iată codul HTML:

<div class="container">
  <div id="divheight">
    <div class="row bg-info text-white">
      <div class="col-sm-2 align-middle">
        <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" </img>
      </div>
      <div class="col-sm-3 align-middle">
        <label>freecodecamp</label>
      </div>
      <div class="col-sm-7 align-middle">
        <label>Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron</label>
      </div>
    </div>
  </div>
</div>

Și CSS:

#divheight {
  heights: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Problema este că, dintr-un anumit motiv, înălțimea rândului este de 50 px ca imaginea, nu de 120 px:

ad-banner
Inaltimea randului Bootstrap

Soluţie

Există câteva motive pentru care acest lucru se întâmplă. Mai întâi, ați observat greșeala de mai sus?

Remediați problema și CSS-ul dvs. va arăta astfel:

#divheight {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Dar rândul dvs. încă nu este de 120 px. Dacă inspectați #divheight, veți vedea că are puțin sub 120 px:

1611663364 990 Inaltimea randului Bootstrap

În loc de direcționare #divheight, coborâți la următorul div element și țintă clasa row:

.row {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Apoi rândul va avea 120 px așa cum vă așteptați:

1611663364 862 Inaltimea randului Bootstrap