Равная высота колонки Bootstrap - PullRequest
Новая
       28

Равная высота колонки Bootstrap

0 голосов
/ 12 октября 2018

Итак, я пытаюсь снова заняться программированием в школе и ставлю задачу создать «фальшивую» компанию с веб-сайтом, чтобы проверить свои навыки программирования.Я использую загрузчик, но мне не удается добиться того, чтобы столбцы в моей строке имели одинаковую высоту.

Пока у меня есть следующие 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, потому что, похоже, она не работает для меня.Заранее спасибо!

1 Ответ

0 голосов
/ 12 октября 2018

Поместите 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>
...