ブートストラップ行の高さ

ブートストラップは、プロジェクトをブートストラップするための最速の方法の1つです。ライブラリには、レスポンシブでモバイルファーストのレイアウトをすばやく起動して実行するのに役立つCSSユーティリティクラスが多数含まれています。

しかし、独自のCSSルールをミックスに追加し始めても、それらがレイアウトに影響を与えていないように見える場合はどうでしょうか。あなたのスタイルを上書きするのはBootstrapですか?または、他の何か?

たとえば、行の高さを増やし、サイズ変更と画像化を行うとします。

HTMLは次のとおりです。

 freecodecamp Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron 

そしてCSS:

#divheight { heights: 120px; } img { width: 50px; height: 50px; } 

問題は、何らかの理由で、行の高さが画像のように50ピクセルであり、120ピクセルではないことです。

解決

これが起こっている理由はいくつかあります。まず、上記のタイプミスに気づきましたか?

これを修正すると、CSSは次のようになります。

#divheight { height: 120px; } img { width: 50px; height: 50px; }

しかし、あなたの行はまだ120pxではありません。調べてみると#divheight、120pxを少し下回っていることがわかります。

ターゲット#divheightにする代わりに、次のdiv要素に移動してクラスをターゲットにしrowます。

.row { height: 120px; } img { width: 50px; height: 50px; }

次に、行は予想どおり120pxになります。