PHP/HTML - カラムを含むカラムの同じサイズ

Question

最初のカラムと他の4つのカラムのグループの間で同じサイズを一致させるには、何か助けが必要です。しかし、私は解答MatchHeightとrow-eq-heightで試しました。私もテーブルを使ってみました。主な問題は、応答性の高いツールを制動することです。制約の

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 bg-success"> 
     <div class="small-box"> 
     <div class="row"> 
      <div class="col-lg-12 col-xs-12"> 
      <h3>Colonne 1</h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices massa ligula, a faucibus nisi scelerisque sit amet. Sed cursus, urna eu suscipit egestas, dui dui luctus purus, malesuada pellentesque dolor dolor ac augue. Duis ac rutrum massa, 
      </p> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="col-xs-6 bg-warning"> 
     <div class="small-box"> 
     <div class="row"> 
      <div class="col-lg-6 col-xs-6"> 
      <h3>Colonne 2</h3> 
      <p> 
       Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam 
      </p> 
      </div> 
      <div class="col-lg-6 col-xs-6"> 
      <h3>Colonne 3</h3> 
      <p> 
       Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam 
      </p> 
      </div> 
      <div class="col-lg-6 col-xs-6"> 
      <h3>Colonne 4</h3> 
      <p> 
       Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam 
      </p> 
      </div> 
      <div class="col-lg-6 col-xs-6"> 
      <h3>Colonne 5</h3> 
      <p> 
       Donec in venenatis enim. Fusce mollis dui a est pharetra mollis. Pellentesque rhoncus, sem nec tempus tincidunt, ligula velit condimentum sapien, non ullamcorper ipsum mi vitae ante. Donec justo neque, euismod ut dapibus ac, varius sit amet ante. Nullam 
      </p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

一つは、右の2つの行を持つことです。私はここで

ブートストラップ3.3.6を使用してい

は、私が働いていたサンプルです。私は一意の行を作ることはできません。

本当にありがとう、助けてくれる人とできる人に感謝します。

Answer 1

はい、それは簡単な問題ではないのです<div class="col-lg-3 col-xs-3">

Answer 2

ですべて<div class="col-lg-6 col-xs-6">を交換してください。

あなたのプロジェクタの「アクセシビリティ」がそれを許可できる場合は、「Flex-Box」（https://codepen.io/imohkay/pen/gpardをチェックしてください）（IE9など：https://caniuse.com/#search=flexboxには適していません）。しかし、私はそれがすでに "row-eq-height"がやっていることだと思います...

次に、jQueryを使って簡単に行うことができます。

するTry何かのように：あなたのケースでは

var autoHeightResize = function (selector) { 
    // Not on responsive 
    if($(window).width() < 1024) return false; 

    var maxheight = 0; 
    var items = $(selector); 
    // Whats is the max height ? 
    for (var i = 0; i < items.length; i++) { 
     maxheight = Math.max(maxheight, $(items[i]).height()); 
    } 
    // Resize block with max-height 
    items.height(maxheight); 
} 

$(document).ready(function() { 
    // Init '#mypage .columns' auto-height resize 
    var selectorAutoHeightBlocs = '#mypage .columns'; 
    autoHeightResize(selectorAutoHeightBlocs); 
    // update columns height on resize page 
    $(window).resize(function() { 
     autoHeightResize(selectorAutoHeightBlocs); 
    }); 
}); 

、あなたのdiv "COL-XS-6 BG-成功"と「COL-XS-6 BGに同じクラス名を与える必要があります-warning "（例：）。

そして、それを上記のコードの 'selectorAutoHeightBlocs'で使用してください。

Answer 3

小規模な画面と特別な小さな画面とは同じ関係を保つことはお勧めしません。 しかし、そこには、次のとおりです。表では

：

<style type="text/css"> 
    .first-col { 
    width: 50%; 
    } 
    table th{ 
    width: 12.5%; /* (50/4) */ 
    } 
</style> 
<div class="responsive-table"> 
    <table> 
    <thead> 
     <tr> 
     <th class="first-col"></td> 
     <th></th> 
     <th></th> 
     <th></th> 
     </tr> 
    </thead> 
    </table> 
</div> 

テーブルなし：

<div class="row"> 
    <!-- First Column --> 
    <div class="col-xs-12 col-sm-6"> 
    <!-- Content --> 
    </div> 

    <!-- Small Ones --> 
    <div class="col-xs-12 col-sm-6"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-3"></div> 
     <div class="col-xs-12 col-sm-3"></div> 
     <div class="col-xs-12 col-sm-3"></div> 
     <div class="col-xs-12 col-sm-3"></div> 
    </div> 
    </div> 
</div> 

注：表応答は、サイズの関係を保持し、小さな画面で読めるコンテンツを維持するフレームを作成します。