[解決済み] Bootstrap 3 - なぜ行クラスはコンテナよりも幅が広いのですか?
2022-08-10 14:02:27
質問
Bootstrap 3を使い始めたばかりです。私は困難な時間を過ごしている
行クラスがどのように動作するかを理解するのに苦労しています。
行クラスの仕組みを理解するのに苦労しています。
padding-left
と
padding-right
?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
http://jsfiddle.net/petran/rdRpx/
どのように解決するのですか?
どのグリッドシステムでも、各カラムの間にはガターがあります。Bootstrapのシステムでは、この溝を作るために各カラムの左と右の両方に15pxのパディングを設定します。
問題は、最初の列の左側に半分のガターがあってはならず、最後の列の右側に半分のガターがあってはならないということです。ある種の
.first
または
.last
クラスを設定する代わりに、その列に対して
.row
クラスを設定し、列のパディングに一致する負のマージンを持つようにします。これにより、最初と最後の列からガッターを引き離すと同時に、幅を広げることができます。
は
.row
div はグリッドカラム以外のものを保持するために使用すべきではありません。もし使用した場合、コンテンツがどのカラムに対しても相対的に移動してしまうことが、あなたの実験で明らかになりました。
UPDATE。
私が回答した後に質問を修正されましたので、現在の質問に対する回答を掲載します。を追加します。
.container
クラスを最初の
<div>
. 参照
動作例
.
関連
-
[解決済み] bootstrapでpanel-bodyの背景色を変更するには?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapでdivの左寄せと右寄せをする
-
[解決済み】Font-awesome、入力タイプ'submit'
-
[解決済み] Twitter Bootstrap 3.0 どのように私は今 "バッジバッジ重要 "するのですか?
-
[解決済み] Bootstrapのアコーディオンを、ヘッダーDivをクリックしたときに折りたたむようにするには?
-
[解決済み] Twitter Bootstrap: コンテナ内のdivを100%の高さにする
-
[解決済み] bowerでbootstrapを使用する
-
[解決済み] Bootstrap 3: col-lgのみ右寄せにする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 4-alphaでメディアブレークポイントを使用する
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] B-tableのBootstrapVue条件列
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み】Twitter bootstrapのモーダルバックドロップが消えない件
-
[解決済み】TwitterのBootstrapを使ってインラインでリストを表示する方法
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み] Twitter Bootstrapのホストバージョンはありますか?[クローズド]
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)
-
[解決済み] Bootstrapのcolは右寄せ