bootstrapのclass[row]は何で必要なんですか？ paddingが不要すぎる気がします。

Question

何か特別な意味合いでもあるのですか？
画像のように余分なpaddingをとられるのが嫌なので、
bootstrapのpaddingを消したり、あえて書かなかったりしています。

詳しいかた教えてください。

---

今回作りたいテーマはこんなものです。
これはだいぶ前に製作したHTMLのサンプルなのですが、これをグリッドシステムを用いてwordpressにしたいです。
ですが、rowを使用することで綺麗な直線にならず、自分のやり方がおかしいのか、これでrowを使うべきでないのか判断がつかないので質問させていただきました。

Answer 1

Bootstrap3を使っている前提で話をします。

可変幅だと説明しづらいので固定幅グリッドで説明しますが、例えば

・コンテナサイズ978px、12グリッド
・ガター15px（左右で30px）
・カラム幅54px

という仕様でグリッドシステムを使った場合、1グリッドは左右ガターを含めて84pxであり、
84×12= 1008px となります。
1グリッドには、左右両方の固定paddingサイズが含まれていますので、
実際にコンテンツが入る領域は左右15pxずつのガターを除いて978pxとなり、コンテナサイズと一致します。
しかしボックス全体としては左右両端のガターサイズ分が想定しているコンテナサイズよりはみ出している状態となっています。

Bootstrapに限らず、グリッドシステムというものはこの余分な左右のガターをどう処理するか、
ということを考える必要があるのです。
そしてBootstrapにおいて.rowはこの左右両端の余分なガターをネガティブマージンで相殺する役割を持っています。

Bootstrapのグリッド幅は可変サイズ（%単位のwidth）ですが、ガターサイズは15pxと常に固定です。
（box-sizing:border-box;でpadding込みのwidthにしています）
.rowで左右のガターを相殺しないで使用すると、デザイン的に横978pxを前提として各カラムの比率を
決めたいのに、横1008pxを前提とした比率で計算したことになってしまい、
左右のガター領域の分だけ微妙に計算が狂ってしまうのです。

その差は実際にはほんのわずかかもしれませんが、
緻密に計算されたデザインを再現する場合、表示されているグリッド幅が想定した計算と違う、
というのはなかなかデザイナーにとっては気持ちの悪いものなのです。

そんな感じですがいかがでしょうか？

Comments

[makoto-n]

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

ありがとうございます。
のpaddingを打ち消すために必要であるということですか？
少し専門的でわかりませんでした、、、。

[aKusano]

そうですね。1〜12カラム全てに左右padding15pxがついていますが、これらのカラムを横に並べた時に、左端カラムの左paddingと右端カラムの右paddingの分が、システム的に余分なので、.rowにネガティブマージン（margin-left: -15px; margin-right:-15px;）をつけてその余分なpadding分のサイズを「なかったこと」にしている感じです。

[makoto-n]

ありがとうございます。

Answer 2

bootstrapはブラウザの環境に対応して
クロスブラウジングの問題を解決して簡単で柔軟にサイトを具現してくれることですね。
bootstrapは格子システム(Gird System)と言うシステムを提供しています。

格子システムとは様々なブラウザ、バージョンが違うブラウザで違って見えるCssをnormalize、
つまり正常化するようにしてくれると言うシステムです
この話はどんなブラウザでも下記のようにレイアウトで接近するのができるのです

例）
[ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ]

[ 2 ] [ 2 ] [ 4 ] [ 3 ] [ 1 ]

[ 6 ] [ 6 ]

[ 12 ]

              [                 6               ]

この時サイトの行と列に接近するために必要なclassがclass[row],[span]です
これを活用して[row-fluid]などのclassでサイトのCssを操作することですね

私もまだ初心者で外国人なので間違ったり望む答えがないかもしれませんね

Comments

[makoto-n]

ありがとうございます。