23

Bootstrap 3 を使用して Web サイトを流動的なグリッドでレイアウトしていますが、グリッド内のボックスが一列に並んでいません。

あなたが見ることができます：ここに画像の説明を入力

ボックスが別のボックスよりも高い場合、グリッドは左揃えになりません。

ハックでどうすれば修正できますか？助けてくれてありがとう！

注：箱の高さは中身のオートラップです。

私のhtmlコード

    <div class="row">
     <?php foreach($contens as $content){?>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img href="<?php echo $content['image'];?>" />
        </div>
            ................ some code .............
       </div>
      </div>
    <?php } ?>
   </div>
4

7 に答える 7

27

何を達成しようとしているのか正確にはわかりませんが、列のコンテンツの高さが異なるために問題が発生します。グリッドの配置/高さの問題を修正するには、3 つの全体的なアプローチがあります。

1.このような CSS のみのアプローチ (CSS3 列幅を使用)。

http://bootply.com/85737

2.このような「clearfix」アプローチ (x 列ごとに反復が必要)。これは、 「レスポンシブ リセット」として知られる Bootstrap が推奨するアプローチです。

http://bootply.com/89910 (このアプローチには CSS のみのバリエーションもあります)

3.最後に、Isotope/Masonry プラグインを使用することをお勧めします。Isotope + Bootstrap を使用した実際の例を次に示します。

http://bootply.com/61482

2017年更新

別のオプションは、列を同じ高さにすることです（フレックスボックスを使用）：

この問題は高さの違いが原因であるため、列を各行で同じ高さにすることができます。Flexbox はこれを行うための最良の方法であり、Bootstrap 4 でネイティブにサポートされています。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

フレックスボックスの等高デモ

Bootstrap 4 は flexbox を使用するため、各行の列はデフォルトで同じ高さになります (追加の CSS なし)。

ブートストラップ可変高列の詳細

于 2013-10-24T17:52:02.500 に答える
4

各<div>列の高さを強制します。

列にクラス名を付けます：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
    ...
</div>

そして、次のようにします。

.outer {
    height: 200px /* Or whatever the height really is */
}

ボックスの高さが異なるため、列が奇妙にレイアウトされています。コンテナ要素の高さを強制すると、それが修正されます。

<div>最良の部分は、コンテンツとは何の関係もないrandom を追加する必要がないことです。

編集：

「sm」ブレークポイント以上を使用している場合にのみ、高さを強制することもできます。

これにより、列が使用されているときにすべてが整列し、全幅 (つまり、col-xs-12) のときに各列の間に大きなギャップが生じなくなります。

@media (min-width: 768px) {
    .outer {
        height: 200px /* Or whatever */
    }
}
于 2014-01-15T14:25:12.803 に答える
3

同様の問題がありました。私はこのスクリプトでかなり迅速に問題を解決しました。

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>

あなたの場合、「#container」などのコンテナ ID を追加し、「.item」などの各アイテムにクラスを追加する必要があります。

于 2014-01-13T22:55:51.193 に答える
0

メーソンリー プラグインがおそらく最適な方法であるという点で Skelly に同意しますが、手早く簡単に修正するには、何かを整列させたままにするたびに新しい行を作成するだけで済みます。ビューポート。

于 2013-10-24T18:35:47.713 に答える
0

私の解決策：ブートストラップ3の可視クラスで作業しました

<div class="row">
<?php 
    $indexLg = 1;
    $indexSm = 1;
    foreach($contens as $content) {?>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="contents-block">
            <div class="image"><img href="<?php echo $content['image'];?>" />
            </div>
        </div>
    </div>
<?php
    if($indexLg%4 == 0) {
        $indexLg = 1;
        ?>
            <div class="clearfix visible-lg visible-md"></div>
        <?php
    } 
    if($indexSm%2 == 0) {
        $indexSm = 1;
        ?>
            <div class="clearfix visible-sm"></div>
        <?php
    }
    ?>
        <div class="clearfix visible-xs"></div>
    <?php
    }
} ?>

于 2013-11-22T18:23:25.433 に答える