如何使 flex 行响应 Bootstrap 4

Question

目前页面如下所示：

现在调整到移动屏幕弹性框会溢出容器：

网址：

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

CSS，我尝试使用媒体但没有改变

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

如何使它们适合容器或使它们显示在列上

Answer 1

不确定您是否需要使用 CSS 对其进行排序，因为 Bootstrap 类应该涵盖这一点。

用“d-flex flex-column d-sm-flex flex-sm-row”替换你的flex类“d-flex flex-row”

并且您的 4 个项目将在移动设备上自动堆叠并在其上方并排放置

Answer 2

默认情况下min-width适用auto于弹性框中的弹性项目- 因此添加到以重置它。min-width: 0port-item

现在盒子不会溢出容器。您还可以使用媒体查询来设置较小设备中的列流：

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}

请参阅下面的演示：

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}

.port-item {
  width: 30%;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}