1

この問題の解決にはいくつかの問題があります (スクリーンショットを参照)。基本的に、2 行目の最初のセルの高さが大きいため、7 番目のセルが適切に配置されません。回避策はありますか? 私が間違っていることはありますか？

コードの抜粋

<div class="row">

  <!-- contribution -->
  <div class="col-xs-6 col-md-4" style="border:1px solid red;">

    <!-- pic -->
    <div class="col-xs-4 col-md-3">
      ...
    </div>

    <!-- payment -->
    <div class="col-xs-8 col-md-9">
      <div class="name">Anonymous</div>
      <div class="contributed">contributed</div>
    </div>

  </div>
  <!-- end contribution -->
</div>

すべての貢献について同じことが言えます。小さな画面では行に 3 つではなくrow2 つしか寄与しないため、各行に div を使用することはできません。col-xs-6 col-md-4rows

ここに画像の説明を入力

4

3 に答える 3

1

Head In Cloud の回答に基づいて構築するには、xs と小さな画面の場合は 2 番目の div (visible-xs visible-sm) ごとに clearfix クラスを使用し、3 番目の div (hidden-xs hidden-sm) ごとに clearfix クラスを使用する必要があります。 ) 中型以上の画面用。上記の例を再現するには:

<div class="row">
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix"></div> <!-- this one is needed for all screen sizes, so just use the clearfix class -->
</div>

別のオプションは、使用しているコンテンツのタイプで機能する場合、min-heightそれらの要素に a を設定することです。これは推定値ですが、min-height を最大の要素よりもわずかに大きい値に設定すると、それらの div はすべて同じ高さになるため、それらは正しくスタックされ、心配する必要はありません。クリアフィックス。これは理想的ではありません。コンテンツを変更した場合でも、その min-height 値内に収まるようにする必要があるからです。

于 2016-02-08T16:03:56.493 に答える
1

clearfix クラスを使用する

必要なビューポートのみに追加の clearfix を追加します

  <div class="clearfix visible-xs"></div>

clearing-bootstrap を見てください

于 2016-02-08T15:37:26.657 に答える
0

ブートストラップなしでその問題を簡単に処理できます。私もその問題に苦労しています:

私が経験したように、float スタイルの要素を使用して、レスポンシブな環境で適切に動作させるのは簡単ではなく、地獄のようです。同じ「行」のすべての要素を同じ高さにしたい場合は、IE9 以降の最適なアプローチはフレックスボックスです。

サンプル、コンテナーに収まらない 4 つのボックスがあるため、収まらない場合は新しい行に移動しますが、すべて同じ高さを維持します (高さの値は不明です)。

<div class="container">
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
</div>

このスタイルを適用するだけで修正されます。

.container {
  display: flex;
  display: -mx-flexbox;
  display: -webkit-flex;
  flex-grow: 0;
  -ms-flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;

  width: 400px; /* Sample constraint */
  background-color: red; /*Visiblity */
}

.element {
  flex: none;
  width: 120px; /* Sample constraint */
  border: 1px solid blue; /*Visiblity */
}

このフィドルをチェックしてください、それはあなたが望むすべてを与えるでしょう。 https://jsfiddle.net/upamget0/

必要に応じてコンテナーに col-12 を適用しますが、通常は適用しません。

出典:自動兄弟 div の CSS 高さ 100% が Chrome で機能しない

フレックスボックスに関する優れた情報は、 https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ にあります。

于 2016-02-08T15:37:37.087 に答える