3

私は、コンテナーが別の色の背景にある白いページのように機能し、サイトのコンテンツがその白いページ内に配置され、側面に触れないように少しパディングされた Web サイトを構築することがよくあります。

レスポンシブ グリッドを使用する場合、これは非常に困難です。コンテナーに 50 ピクセルのパディングを追加すると、特定の解像度では問題なく動作しますが、他のサイズではページが画面に対して大きくなりすぎます。これは明らかに、特定のメディア クエリのブートストラップの CSS で定義された幅に関係しています。

私は各メディアクエリを調べ始め、特定の解像度でページを正しく表示するために各スパンと各オフセットから正確に何ピクセルを差し引く必要があるかを計算するためにいくつかの計算を行いましたが、そこで立ち止まって考えました。より良い方法になります!

私は必要な作業を行うことを嫌いではありませんが、すべてではないにしても多くの TB プロジェクトでこの問題に遭遇しているので、最も論理的で簡単に再現できる方法でプロセスに取り組んでいると感じたいと思います.

各スパンとオフセットのピクセル サイズを手動で変更しますか? それとも、パッド入りの容器にアプローチする別のより賢明な方法があるのでしょうか?

あなたの考えに感謝します!ありがとう。

4

1 に答える 1

6

box-sizing を border-box に設定できます。問題は、12 スパンのウィズがコンテナーのウィズよりも大きいことです。グリッドを相対的にする.row-fluidを使用することで、これに取り組むことができます。

.container { box-sizing: border-box; padding: 50px; }

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

于 2012-10-17T13:39:08.600 に答える