Как выровнять столбцы по горизонтали ИЛИ по вертикали в зависимости от области просмотра в Bootstrap 4?
У меня есть следующая установка -
.left {
height: 100vh;
background-color: #208ea3;
}
.right {
height: 100vh;
background-color: #37a862;
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "container-fluid" color = "green">
<div class = "row justify-content-md-start">
<div class = "col-lg-3 left d-flex align-items-center justify-content-center" id = "first-section">
<div class = "text-center">
<div class = "row-fluid align-items-center justify-content-center h-100">
<div class = "col-xl-6" id = "dynamic-columns">
some quotations
</div>
<div class = "col-xl-6" id = "dynamic-columns">
<h3>title</h3>
Some text
</div>
</div>
</div>
</div>
<div class = "col-lg-9 right" id = "next-section">
more text
</div>
</div>
</div>Я хочу присвоить свойства #dynamic-columns таким образом, чтобы, когда экран имеет max-height 500 пикселей, столбцы занимали 100% высоты и располагались бок о бок. На данный момент это горизонтальное выравнивание не выполняется, а нижний #dynamic-columns скрывается #next-section, если на нем больше текста.
Мое требование исходит из того факта, что многие телефоны имеют высоту около 500 пикселей в ландшафтном режиме, что не позволяет мне отображать контент в #first-section по вертикали. Таким образом, я хотел бы выровнять их по горизонтали, чтобы первый #dynamic-columns был слева от экрана, а второй справа.
Я подумал, что потребуется следующий запрос, но я не могу найти свойства -
@include (max-height:500px) {
#dynamic-columns {
display: ??
}
}новичкам очень сложно найти правильные термины, чтобы найти такие вопросы... спасибо за ответ! оно работает
эти вопросы совершенно не имеют отношения к вашему вопросу, не волнуйтесь;). Он скоро будет вновь открыт (вы можете прочитать их все, вы не найдете подсказки для решения)
Ответы 2
Вы можете попробовать, как показано ниже. Я обновляю версию начальной загрузки до 4.5, чтобы иметь возможность использовать vh-100
.left {
background-color: #208ea3;
}
.right {
background-color: #37a862;
}
@media (max-height:500px) {
.left > div {
height:100%;
width:50%;
}
}<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "container-fluid" color = "green">
<div class = "row">
<div class = "col-lg-3 vh-100 left d-flex flex-column flex-wrap justify-content-center text-center" id = "first-section">
<div class = "d-flex flex-column justify-content-center">
some quotations
</div>
<div class = "d-flex flex-column justify-content-center">
<h3>title</h3>
Some text
</div>
</div>
<div class = "col-lg-9 vh-100 right" id = "next-section">
more text
</div>
</div>
</div>Я нашел способ добиться того, что вы ищете, и в чистом CSS. Я надеюсь, что это помогает. Я обнаружил, что вы использовали @include вместо @media.
* {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.flex-container div {
flex-grow: 1;
color: white;
}
.column-1 {
background: teal;
}
.column-2 {
background: blue;
}
@media (max-height: 500px) {
.flex-container {
flex-direction: row;
}
}<body>
<div class = "flex-container">
<div class = "column-1">Column 1</div>
<div class = "column-2">Column 1</div>
</div>
</body>Действительно, OP, вероятно, использует SCSS, откуда взято ключевое слово @include.
опять неуместные дубликаты, на этот раз прочитав половину заголовка...