Изменение размера элемента столбца Bootstrap при переходе к новой строке
Кажется простым, но я не могу заставить эти колонки играть хорошо.
https://jsfiddle.net/talgia/xgjt15p3/5/
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container-fluid bottompad">
<div class = "row">
<h2 class = "moduleHeading">
Phasellus ut blandit eros</h2>
<div class = "col-lg-3 col-sm-6">
<div style = "padding: 5px; width:100%;">
<img alt = "photo1" class = "img-responsive" src = "/sites/default/files/Career_square.jpg" style = "width: 100%;" />
<h3 style = "font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Sed interdum</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum. Praesent egestas nibh at turpis tempor ultrices. </p>
<div>
<a class = "btn-primary" href = "/node/63">Learn more</a></div>
</div>
</div>
<div class = "col-lg-3 col-sm-6">
<div style = "padding: 5px; width:100%;">
<img alt = "photo2" class = "img-responsive" src = "/sites/default/files/Hope_square.jpg" style = "width: 100%;" />
<h3 style = "font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Ut lobortis elementum</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class = "btn-primary" href = "/node/62">Learn more</a></div>
</div>
</div>
<div class = "col-lg-3 col-sm-6">
<div style = "padding: 5px; width:100%;">
<img alt = "photo3" class = "img-responsive" src = "/sites/default/files/guardian_square.jpg" style = "width: 100%;" />
<h3 style = "font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Ut blandit eros</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class = "btn-primary" href = "/node/124">Learn more</a></div>
</div>
</div>
<div class = "col-lg-3 col-sm-6">
<div style = "padding: 5px; width:100%;">
<img alt = "photo4" class = "img-responsive" src = "/sites/default/files/rebound_square.jpg" style = "width: 100%;" />
<h3 style = "font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
Elementum tortor</h3>
<p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
<div>
<a class = "btn-primary" href = "/node/123">Learn more</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
В представлении экрана «md» столбец переносится на новую строку в зависимости от размера сопроводительного текста в указанных выше столбцах. Как я могу выровнять эти элементы столбца независимо от длины текста указанного выше элемента?
Вот фотография, которая упрощает то, что я хочу сделать. См. Jsfiddle, чтобы узнать о проблеме, с которой я столкнулся. элемент 4 перемещается на новую строку в виде MD, а элемент 3 занимает его место из-за высоты вышеупомянутого элемента.
Ответы 2
Причина этой проблемы в том, что содержимое внутри столбцов имеет разную высоту. Вот статья, которая объясняет это: https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643
Проблема с высотой начальной загрузки возникает из-за того, что столбцы (col--) используйте float: left. Когда столбец «перемещается», он исключается из обычного потока документа. Он смещается влево или вправо, пока не коснется края содержащего его ящика. Итак, если у вас неравная высота столбцов, правильным поведением будет их штабелирование на ближайшей стороне.
Я думаю, что самое простое - сделать все столбцы одинаковой высоты. На мой взгляд, Flexbox - лучший способ сделать это, поскольку макет будет гибким независимо от содержимого, которое у вас есть внутри контейнера (Bootstrap 4 уже использует flexbox). Вы также можете просто установить фиксированное значение высоты для всех столбцов (в статье предлагается несколько способов сделать это). В статье также есть еще пара подходов.
Благодаря приведенному выше ответу я использовал несколько строк CSS.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
и добавил класс display-flex к моим строкам, чтобы обеспечить одинаковую высоту во всех столбцах для облегчения выравнивания. Вы можете увидеть это в действии по этой ссылке jsfiddle. https://jsfiddle.net/talgia/xgjt15p3/38/
Спасибо, Ильзе Гарсия!
Спасибо за ссылку, эта статья очень помогла.