Bootstrap 4 Столбцы с одинаковой высотой не работают
У меня есть два столбца рядом друг с другом, но содержимое внутри них отличается, но столбцы разные. Мне повезло, что это было по умолчанию, это bootstrap 4 или он был в одном из альфа в одной точке.
В настоящее время я попытался
.equal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.equal > [class*='col-'] {
display: flex;
flex-direction: column;
}
и добавил, что к моему css.
и мой html выглядит.
, но он Кажется, что это никак не влияет на это.
edit похоже на его не столбец, а содержимое внутри указанного столбца, которое не является 100% его родительского элемента.
, но если я делаю высоту: 100% это делает его 100vh по какой-то причине, а не 100% высоты столбца.
https://codepen.io/anon/pen/KBEegO
в этом я сделал divs внутри него, мне нужны divs 100% родительского столбца
https://codepen.io/anon/pen/KBEegO
, который является текущим представлением строки и столбца, граница находится во внутреннем div столбца.
Мне нужно это, если в левом столбце больше содержимого, правый столбец имеет ту же высоту, что и он, и если правый столбец находится так, как на изображении, левый столбец получает свою высоту.
2 ответа
Я обновил кодировщик, пожалуйста, проверьте https://codepen.io/anon/pen/KBEejz?editors=1100
.equal div div {
border: 1px solid green;
height: 100%;
display: flex;
flex: 1;
}
.equal>[class*='col-'] {
display: flex;
flex-direction: column;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row equal">
<div class="col-md-8">
<div>
<p style="background-color:pink;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quibusdam nobis praesentium hic vero quo quia error sed commodi cumque, illo porro eaque ad ipsa. Error maxime consequatur officiis alias fuga mollitia quas, magnam delectus necessitatibus
illum, quos aperiam doloremque eaque explicabo architecto dolor? Placeat quos nemo natus velit aliquam?</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci blanditiis commodi sapiente totam sequi consectetur provident. Voluptatibus corrupti odit reiciendis, aliquid temporibus dolores tempore optio delectus nesciunt ipsam veritatis quisquam
facilis voluptatem voluptates inventore aliquam, praesentium, assumenda ducimus ratione quasi nisi sunt consequatur corporis soluta. Deleniti quam harum soluta alias minima voluptas iusto voluptates, iure necessitatibus assumenda ex. Minus numquam
beatae vero aperiam cupiditate assumenda ipsam hic ad corporis placeat facere consequuntur consectetur sint, aspernatur mollitia optio odit eos officia nostrum? Totam asperiores quia sequi autem. Ex nostrum fuga, et, illo iusto inventore officiis
facere minima hic sint obcaecati consectetur.</p>
</div>
</div>
</div>-
1У меня есть контент на моем сайте, но он динамичен и вытащен из api. по-прежнему должны работать – Andy Wilson 13 August 2018 в 15:34
-
2Не уверен, если у вас есть какие-либо дополнительные вопросы по этому вопросу, пожалуйста, объясните более подробно. – Charu Maheshwari 13 August 2018 в 15:43
-
3я отредактировал мой вопрос, посмотрю на изображение, загруженное, которое показывает мою проблему, также ваш код не работает – Andy Wilson 13 August 2018 в 15:52
-
4Вы хотите иметь внутри divs равную высоту, поэтому обратите внимание на приведенный выше p, который имеет меньше контента, но занимает полный рост div. это означает, что вы имеете в виду родительскую высоту 100%? – Charu Maheshwari 14 August 2018 в 07:49
Для div внутри этого, вы можете использовать абсолютную позицию с преобразованием CSS и переводить свойство.
.innerdiv {
top: 50%;
position:absolute;
left: 50%;
transform: translate(-50%, -50%);
}
Это сделает вашу внутреннюю div-вершину и горизонтальный центр.
-
1Это flexbox ... поэтому нет необходимости в этом - выровнять середину display:flex; align-items: center; – Zac 13 August 2018 в 15:41
-
2Это не то, чего я пытаюсь достичь вообще. Мне нужно, чтобы внутренний div обоих столбцов составлял 100% высоты и ширины строки, основанной на столбце с самым вертикальным контентом – Andy Wilson 13 August 2018 в 15:43