Question

因此，我正试图再次通过学校进行编码，并一直致力于创建一个带有网站的“伪造”公司来测试我的编程技能。我正在使用引导程序，但似乎无法设法使行中的列具有相等的高度。

到目前为止，我拥有以下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

1 个答案: