ウィンドウのサイズを変更するときにブートストラップカードを整列させて同じ高さにする方法は？

私はブートストラップを使用して同じ高さの5つの要素を作成しようとしています。理想的には、私はこれをさまざまな画面サイズで見たいと思っています。ウィンドウのサイズを変更するときにブートストラップカードを整列させて同じ高さにする方法は？

私が得たものしかし、これを達成するためにブートストラップのグリッド・システムを使用している、このようなものである。これらの要素を作るための良い方法は同じ高さである何

それらを適切に整列させますか？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link href="stack.css" rel="stylesheet"> 

</head> 
<body> 

<div class="container"> 
<div class="row"> 

<div class="col-sm-12 col-md-6 col-lg-4 box"> 
    <div>1</div> 
    <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" src=""> 
     <!--Card content--> 
     <div class="card-block"> 

     <h4 class="card-title">Some Title</h4> 

     <p class="card-text">Lorem </p> 

     <!-- Button --> 
     <div class="button" > 
      <a href="" target="_blank">Button</a> 
     </div> 

     </div> <!--/.Card content--> 
    </div> <!--/.Card--> 
</div> 

<div class="col-sm-12 col-md-6 col-lg-4 box "> 
    <div>2</div> 
    <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" src=""> 
     <!--Card content--> 
     <div class="card-block"> 

     <h4 class="card-title">Some Title</h4> 

     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco lin voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     <!-- Button --> 
     <div class="button" > 
      <a href="" target="_blank">Button</a> 
     </div> 

     </div> <!--/.Card content--> 
    </div> <!--/.Card--> 
</div> 

<div class="col-sm-12 col-md-6 col-lg-4 box"> 
    <div>3</div> 
    <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" src=""> 
     <!--Card content--> 
     <div class="card-block"> 

     <h4 class="card-title">Some Title</h4> 

     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.si ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     <!-- Button --> 
     <div class="button" > 
      <a href="" target="_blank">Button</a> 
     </div> 

     </div> <!--/.Card content--> 
    </div> <!--/.Card--> 
</div> 

<div class="col-sm-12 col-md-6 col-lg-4 box"> 
    <div>4</div> 
    <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" src=""> 
     <!--Card content--> 
     <div class="card-block"> 

     <h4 class="card-title">Some Title</h4> 

     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehen</p> 

     <!-- Button --> 
     <div class="button" > 
      <a href="" target="_blank">Button</a> 
     </div> 

     </div> <!--/.Card content--> 
    </div> <!--/.Card--> 
</div> 

<div class="col-sm-12 col-md-6 col-lg-4 box"> 
    <div>5</div> 
    <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" src=""> 
     <!--Card content--> 
     <div class="card-block"> 

     <h4 class="card-title">Some Title</h4> 

     <p class="card-text">Lorem ipsum dolor sit amet, con</p> 

     <!-- Button --> 
     <div class="button" > 
      <a href="" target="_blank">Button</a> 
     </div> 

     </div> <!--/.Card content--> 
    </div> <!--/.Card--> 
</div> 

</div> 
</div> 

</body> 
</html>

出典

2017-04-16 Dante Greyson

flexから.row表示設定、そしてちょうどそれにパラメータを追加します（私たちは気にしませんこの1程度）flex-grow & flex-shrinkの省略形だチャイルズ（.box）flex: 1です。それはあなたの子供のコンポーネントを同じ高さにします。

出典

2017-04-16 18:08:32

ありがとうございます、私はクラスの行にフレックスを追加することで、すべて同じ高さにすることができました。しかし、今では5つの要素がすべて1行になっています。ウィンドウのサイズを変更すると、要素を次の行に移動するにはどうすればよいですか？ –

' .row { display：flex; フレックスフロー：行の折り返し。 } .row：{ の内容： ''; 幅：100％; } .box { フレックス：1; } 。ボックス：n番目のタイプ（n + 4）{ オーダー：1; } このコードを使用すると線を壊すことができますが、少しのことがあります。高さは新しい行の最大高さに再開します。 –

ウィンドウのサイズを変更するときにブートストラップカードを整列させて同じ高さにする方法は？

答えて

関連する問題