html - 如何创建 2 个高度相同的 Bootstrap 行并且在调整大小时它们必须堆叠

Question

我使用了以下 CSS 和 HTML，我的列高度相同但在较小的分辨率下查看时不再堆叠:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

HTML
<div class="container-fluid"> 
  <div class="row-eq-height">
    <div class="col-lg-6" style="background-color:#23282D;">
     This is an example of the left hand column
    </div>
    <div class="col-lg-6" style="background-color:white;">
      This is an example of the right hand column
    </div>
    </div>
  </div>
</div>

Answer 1

希望对您有所帮助。当屏幕宽度小于断点时，需要添加媒体查询使列宽100%。 https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints

760px 可以根据所需的屏幕尺寸而变化。引用 bootstrap 等 css 网格框架。

 @media screen and (max-width: 760px) {
    .col-lg-6 {
       width: 100%;
    }
 }

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.col-lg-6 {
    display: flex;
    width: 50%;  /** is included in bootstrap css for all column */
}
.content {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

 @media screen and (max-width: 760px) {  /* This is included in bootstrap css */
    .col-lg-6 {
       width: 100%;
    }
 }

HTML
<div class="container-fluid"> 
  <div class="row-eq-height">
    <div class="col-lg-6" style="background-color:#23282D; color: #fff;">
     <div class='content'>This is an example of the left hand column</div>
    </div>
    <div class="col-lg-6" style="background-color:#dfdfdf;color: #23282d;">
      <div class='content'>This is an example of the right hand column. This is an example of the right hand column. This is an example of the right hand column. This is an example of the right hand column. </div>
    </div>
    </div>
  </div>
</div>