1

1 つの大きな画像の後に 2 つの列があり、1 つは画像用、もう 1 つはテキスト用の単純な 2 列のレイアウトを作成しようとしています。

ミスアライメント

しかし、画像列を一番上の大きな画像に合わせることができません。-15px の余白でクラスを追加できますが、XS の画面サイズにずれがあります。


-15px の余白あり

xs スクリーンに -15px のマージンを追加することもできます。これは非常に基本的なレイアウトの問題です。私は何か間違ったことをしていると感じています。

私が間違っていることと、Bootstrap 3 で 2 列のレイアウトにどのようにアプローチすればよいでしょうか?

Bootplyリンクはこちら

4

3 に答える 3

2

下の<div class="col-sm-12">箱にあるものは故障の原因となります。ここには 2 つのオプションがあります。

  1. divを削除するだけです
  2. <div class="row">の後に追加を追加します。<div class="col-sm-12">

基本的にネストされたグリッドを作成していましたが、ブートストラップでは、新しいネスト レベルごとに新しいグリッドで開始する必要があります。<div class="row">

参照: http://www.bootply.com/sh13QtYpFP

于 2014-07-09T15:24:41.007 に答える
1

@bspellmeyerは正しいです。Bootstrap で列をネストする場合は、a を追加してから、ネストした列を追加する必要がありrowます。

これが理由です

グリッドは、コンテナ、行、列の 3 つの部分で動作します...

コンテナには 15px のパディングがあります。行は、-15px のマージンでコンテナーのパディングを無効にします。列には 15 ピクセルのパディングがあり、コンテンツをコンテナーの端から引き離し、一貫した 30 ピクセルのガターを作成します。

負の行余白によってのみ無効化される 15 ピクセルのパディングを追加する目的はばかげているように思えますが、他の列の内部に列をネストできるようにすることは不可欠です! 下の図で、赤いアウトラインで示されたネストされた列が、追加のパディングを適用することなく、囲んでいる列にきちんと収まっていることに注意してください。

TBSグリッド

これがひとたび浸透すれば、グリッドをいつでも思いどおりに動作させることが簡単になることを約束します。

于 2014-07-09T15:36:21.417 に答える
-1

追加する必要があります:

.custom-left {    
    padding: 0;
}

あなたの.custom-leftクラスに。この div を一番上の画像にも合わせたい場合は、同じものを .custom-right クラスに追加します。

Bootply の更新: http://www.bootply.com/iQYEpYqXJZ

于 2014-07-09T15:24:33.157 に答える