0

プロジェクトで Bootstrap 3 を使用して、高校の課題オーガナイザーを作成しています。この画像のように、週末の 2 つの列は通常の平日の列の半分の幅で、行の高さは 2 倍になるはずです。

どうなるんだろう

私の解決策は、この例のように、通常の列を中に入れ<div class="col-md-10">、他の 2 つの列を に入れることでした。div class="col-md-2"

問題は、通常の列の各行の終わりで、その行が余分に 60 程度のピクセルを占めていることです (たとえ LESS ソースの @grid-gutter-width 変数が 0 に設定されていても、すべてのサブ各トップレベルの列内の列は、想定どおりガター幅なしで接触するため、col-md-10 と col-md-2 は接触していません。Chrome のインスペクタを調べます。何もないにもかかわらず、別の要素が各行の最後にあるかのように、行に余分な長さがあることを示しているだけです。これは、ページが実際にどのように見えるかです:

実際に何が起こるか

先ほどのギャップに注目してください。これを修正する方法はありますか?

4

1 に答える 1