列高相等 Bootstrap

Question

所以，我正试图通过学校重新开始编码，并一直在分配创建一个 'fake' 公司的任务，该公司有一个网站来测试我的编程技能。我正在使用 bootstrap，但我似乎无法让行中的列具有相同的高度。

到目前为止，我有以下 HTML & CSS：

.dienst-kaart{
 padding:15px;
 min-height:100%;
}

.dienst {
  background:white;
    padding:4%;
    opacity:0.9;
    box-shadow: 5px 10px 10px #e1e0e2;
}

<div class="row">
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Web design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Grafisch design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Online marketing</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>E-commerce</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
</div>

任何人都可以帮助我使用 flexbox 技术，因为它似乎对我不起作用。提前致谢！

Answer 1

将 display: flex 放入 .dienst-kaart 规则。

.dienst-kaart{
    display: flex;
    padding:15px;
    min-height:100%;
}

.dienst {
    background:white;
    padding:4%;
    opacity:0.9;
    box-shadow: 5px 10px 10px #e1e0e2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Web design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Grafisch design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Online marketing</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p>          </div>
            </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>E-commerce</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p>
            </div>
        </div>
    </div>

列高相等 Bootstrap

Equal column heights Bootstrap

html

css

bootstrap-4

size

col