0

私はこのレイアウトhttp://twitter.github.com/bootstrap/examples/fluid.htmlを変更していますが、サイズ変更中にコンテナーのギャップ/パディングを左、右、および上に 5px に保つことができないようです。現在のパディングは、どの画面サイズでも約 20px のようです。

これにより、サイズが小さくなるまで必要なものが得られます。どの画面サイズで変更されるかわかりません。Chrome の 2 番目の遷移のあたりです。その小さなサイズになった後、上の例の大きなギャップに戻ります。

body {
  padding-top: 45px;
  padding-bottom: 40px;
}
.cont-pad {
  padding-left:5px;
  padding-right:5px;
}
.container {
  padding-left:5px;
  padding-right:5px;
}
.container-fluid {
   padding-left:5px;
   padding-right:5px;
}

これを例から取った html レイアウトとして使用しています。色は、サイズ変更時にコンテナーがどのようにパディングされるかを視覚的に確認するためのものです。私が行った変更から気づいたことの 1 つは、サイズ変更された div 自体のパディングではなく、最も外側のコンテナーの幅がブラウザーの側面からパディングされているように見えることです。body タグの左右のパディングを変更すると、navbar のパディングも変更されます。私はしたくない。

<div class="container-fluid cont-pad" style="background-color:Blue;">
  <div class="row-fluid">
    <div class="span12" style="background-color:Red;">this content should be 5px from left, top, and right</div>
  </div>
</div>

@media タグを何らかの方法で変更する必要があると思います。(max-width: 980px) を 5px に変更しようとしましたが、結果は同じです。

4

2 に答える 2

0

現在、ブートストラップ レスポンシブ 2.3 を使用して Web サイトを構築しています。これを CSS に追加するだけで、ページのガターを削除しました。

.container-fluid {
padding-right: 0;
padding-left: 0;
}

そして、右と左に5pxのパディングを試してみましたが、うまくいくようです。

コンテナに影響を与える CSS が他にないことを確認してください。

于 2013-03-13T20:13:32.507 に答える