積み上げられたブートストラップ行のギャップを解消するにはどうすればよいですか?-CSSチュートリアル-php.cn

積み上げられたブートストラップ行のギャップを解消するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-07 12:21:03

オリジナル

1028 人が閲覧しました

How to Eliminate Gaps in Stacked Bootstrap Rows?

スタックされたブートストラップ行のギャップ: 解決策

ブートストラップベースのグリッドでは、さまざまな高さのタイルをスタックするときにギャップに関する問題が発生するのが一般的です。これに対処するには、次のアプローチを検討してください。

1.要素の高さの設定:

一貫した配置を確保するために、ポートフォリオ内のすべての要素に固定の高さを割り当てます。

2.石積みのレイアウト:

石積みなどのツールを使用して、要素の高さを自動的に調整し、利用可能なスペース内に要素を合わせます。

3.応答性の高い列のリセット:

ブートストラップは「応答性の高い列のリセット」を提供します。これらのクラスをグリッドに適用すると、列の高さを動的に設定し、ギャップを回避できます。

4. Clearfix with Media Queries:

各要素の後に、ミニ Clearfix を含む div を追加します。これはメディアクエリを使用して非表示にすることができ、ギャップの問題に効果的に対処できます。

コード例:

<div class="row portfolio">
  <div class="col-lg-2 col-sm-3 col-xs-4">
    <div class="panel panel-default">
      ... (Element content)
    </div>
  </div>
  <div class="clear"></div>  <!-- Added after each element -->
  ... (Additional elements)
</div>

ログイン後にコピー

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

ログイン後にコピー

jQuery アプローチ:

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});

ログイン後にコピー

以上が積み上げられたブートストラップ行のギャップを解消するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。