0

テーマを変更するために css をオーバーライドする必要があるこのブートストラップ テンプレートがあります。ただし、テンプレートは、私がよく使用する流動的なグリッド システムではなく、ブートストラップのデフォルトのグリッド システムを使用しています。流体グリッド システムは動的であるため、残りのスパン (.span12、.span9 など) をオーバーライドすることなく簡単に調整できます。コンテナのサイズを変更する必要がありました。

ただし、ブートストラップ テンプレートのデフォルトのグリッド システム (.span12、.container は 1200px に等しい) では、レスポンシブでもありますが、スパンにはデフォルトの固定値があることがわかりました。したがって、CSSを次のように設定すると：

.container {
max-width: 940px;
padding: 0 20px;
}

そして、これは残りのレイアウトではうまくいくように見えましたが、ズームアウトして 1200px で Web サイトを確認すると、すべてが正しく表示されません。私はこれでそれを修正できると思った：

@media (min-width: 1200px) {
.span12, .container {
    width: 940px;
}

.container {
    padding: 0 20px;
}}

ただし、そのレイアウトの残りのスパンはデフォルトの固定幅のままで、コンテナーが以前よりも小さいため、互いに下に配置されます。調整しません。w/c は流体グリッド システムでは発生しません (スムーズに調整されます)。

たとえば、1200px の解像度では、.span3 の幅は 270px のままです。したがって、4 つの .span3 div をまとめると、合計で 1080px になります。しかし、幅 940px と側面のパディング 20px しか必要ないため、これはできません。

4

1 に答える 1

0

あなたはあなたの質問でそれを自分で答えたと思います。スパン クラスにも固定幅を割り当てるだけです。

@media (min-width: 1200px) {
.container  {
        width: 940px;
        margin: 0 auto;
    }

.span3 {
  width: 220px;
}

}

Span クラスには、margin-left: 20px のデフォルト プロパティがあります。したがって、 .container ==> padding: 0 20px; を入れると 合わない場合があります。このために、span3 クラスの最初の子を margin-left 0 にすることができます。

.span3:first-child {
      margin-left: 0;
}

お役に立てれば。

于 2013-06-10T22:53:33.860 に答える