調整窗口大小並使其高度相同時如何對齊Bootstrap卡？

我試圖用bootstrap創建5個相同高度的元素。理想情況下，我希望它在不同的屏幕尺寸上看起來像這樣。調整窗口大小並使其高度相同時如何對齊Bootstrap卡？

我用引導的網格系統但是實現這個我所得到的是這樣的：

有什麼好的方法，使這些元素在同一高度並正確對齊它們？

<!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

設置.row顯示器flex，然後只需添加參數，這是孩子的（.box）flex: 1這是爲flex-grow & flex-shrink速記（約這一塊，我們不關心）。這將使你的孩子組成同樣的高度。

來源

2017-04-16 18:08:32

謝謝，我可以通過向類行添加flex來使所有內容都達到相同的高度。但是現在所有五個元素都在一行中。在調整窗口大小時，如何將元素切換到下一行？ –

' .row {display：flex; flex-flow：row wrap; } .row：之後{ 內容：''; 寬度：100％; } .box {flex：1; } .box：第n型（n + 4）{ order：1; } ' 有了這段代碼，你可以打破這條線，但是會變成一件小事。高度重新啓動到新行的最大高度。 –

調整窗口大小並使其高度相同時如何對齊Bootstrap卡？

回答

相關問題