html - 如何使列水平或垂直对齐取决于 Bootstrap 4 中的视口？

Question

我有以下设置 -

.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这样，当屏幕的 amax-height为 500px 时，列占据 100% 的高度并并排排列。到目前为止，这种水平对齐不会发生，如果有更多文本，底部#dynamic-columns会被隐藏。#next-section

我的要求来自这样一个事实，即许多手机在横向模式下的高度约为 500 像素，这不允许我#first-section垂直显示内容。因此，我希望将它们水平对齐，以便第一个#dynamic-columns在屏幕左侧，第二个在右侧。

我认为以下查询将是必要的，但我无法找到属性 -

@include (max-height:500px) {
  #dynamic-columns {
      display: ??
    }
    
}

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以尝试如下。我将引导程序版本更新为 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>