我有以下设置-
.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为500px时，列占据100%的高度，并并排排列。到目前为止，这种水平对齐没有发生，如果有更多文本，底部的#dynamic-columns会被#next-section隐藏。
我的要求来自于这样一个事实，即许多手机在横向模式下的高度约为500px，这不允许我垂直显示#first-section中的内容。因此，我希望将它们水平对齐，以便第一个#dynamic-columns在屏幕的左侧，第二个在屏幕的右侧。
我认为以下查询是必要的，但我找不到属性-
@include (max-height:500px) {
#dynamic-columns {
display: ??
}
}您可以尝试如下。我将引导版本更新为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>