Question

我正在尝试使用bootstrap创建5个相同高度的元素。理想情况下，我希望它在不同的屏幕尺寸上看起来像这样。

我使用Bootstrap的Grid系统来实现这一点，但我得到的是这样的：

将这些元素设置为相同高度并正确对齐它们的好方法是什么？

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

Answer 1

将.row显示设置为flex，然后只需将参数添加到其子项（.box）flex: 1，这是flex-grow＆amp;的简写。 flex-shrink（关于这个我们不在乎）。这将使您的孩子组成相同的高度。

如何在调整窗口大小并使其高度相同时对齐Bootstrap卡？

1 个答案: