调整窗口大小并使其高度相同时如何对齐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卡？

回答

相关问题