Одинаковая высота дочернего элемента в среде начальной загрузки - PullRequest
Новая
       21

Одинаковая высота дочернего элемента в среде начальной загрузки

0 голосов
/ 20 июня 2019

Bootstrap 4 довольно хорош, потому что он поставляется с flexbox, который решает много проблем, особенно для вертикального выравнивания, но как работать только с частью фреймворка и что, если я хочу нацелить не непосредственно на элемент, а ребенок внутри элемента?

Вот моя проблема.

Я использую мою версию bootstrap4, которая является минимальной, и я хочу построить эту структуру: 

<div class="row">
    <div class="col-md-4">
        <div>
            <h2>Diplôme en Big Data</h2>
            <img src="https://cceconcordia.ca/wp-content/uploads/2019/06/2.jpg" alt="">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book./p>
            <a href="#">En savoir plus</a>
        </div>
    </div>
    <div class="col-md-4">
        <div>
            <h2>Certificat en Big Data pour les entreprises</h2>
            <img src="https://cceconcordia.ca/wp-content/uploads/2019/06/3.jpg" alt="">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Bla blabla bla bla bla bla</p>
            <a href="#">En savoir plus</a>
        </div>
    </div>
    <div class="col-md-4">
        <div>
            <h2>Certificat de gestion de système en Big Data</h2>
            <img src="https://cceconcordia.ca/wp-content/uploads/2019/06/4.jpg" alt="">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#">En savoir plus</a>
        </div>
    </div>
</div>

Это просто пример с lorem ipsum, но моя цель - сделать элемент <p> одинаковой высоты на разных страницах, несмотря ни на что. Если я нацеливаюсь на родительский элемент, результат выполним с помощью flexbox: 

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

Этого было бы достаточно, но я хочу нацелить элемент <p> с помощью класса из начальной загрузки 4, чтобы все они были одинаковой высоты. Возможно ли это?

...