Как я могу иметь одинаковую высоту в моих дочерних элементах Bootstrap flex? - PullRequest
Новая
       18

Как я могу иметь одинаковую высоту в моих дочерних элементах Bootstrap flex?

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

Насколько я понимаю, новый Boostrap (v4) использует flex для отображения элементов на коробке и намного более гибок для выравнивания.На моей странице есть три поля одинаковой высоты, однако внутренние элементы белого цвета также должны иметь одинаковую высоту.

enter image description here

Как я могудостичь этого?Установка .tile в height:100%; делает поля слишком длинными.

РЕДАКТИРОВАТЬ: Я хочу прояснить, это не сделать столбцы, отмеченные красным цветом равной высоте, это уже достигается с помощьюстандартные классы начальной загрузки.Это коробки белого цвета. Мне нужно быть в полный рост. Это не относится ни к одному из вопросов об обмане, которые уже здесь

Code Pen Link

HTML 

<div class="container">
<div class="row row-eq-height three-sections">
                            <div class="col-md-4 align-self-stretch tile-outer">
                                <div class="tile">
                                    <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid"/></a>
                                    <div class="padding">
                                        <h3>Text block 1</h3>
                                        <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi clita, eu pro tation audiam.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 align-self-stretch tile-outer">
                                <div class="tile">
                                    <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid"/></a>
                                    <div class="padding">
                                        <h3>Some random text here</h3>
                                        <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 align-self-stretch tile-outer">
                                <div class="tile">
                                    <a href="#" target="_blank"><img src="https://via.placeholder.com/300x300" alt="" class="img-fluid"/></a>
                                    <div class="padding">
                                        <h3>Another random line</h3>
                                        <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
  </div>

CSS 

.col-md-4 {
  border: 1px solid red;
}
.tile {
 background: #fff;
}
body {
  background: grey
}
.img-fluid {
  width: 100%;
}
.padding {
  padding: 0 10px;
}

Ответы [ 2 ]

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

Также это можно решить с помощью этого 

.tile {
 background: #fff;
 height: 100%:
}
0 голосов
/ 02 октября 2018

Просто добавьте display: flex к col-md-4 контейнерам.Это автоматически применит align-self: stretch к дочерним элементам. исправленный демо

...