如何使弹性行响应 Bootstrap 4

Question

当前页面如下所示：

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

html:

       <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

我为你做的 :) :)

<div class="container-fluid d-flex flex-xl-row justify-content-xl-between flex-column">

<div class="bloc_1 p-2" style="background-color: red"> picture </div>

<div class="bloc_2 p-2" style="background-color: antiquewhite">
 <div class="d-flex flex-column">
     <div class="p-4"> Headline</div>
     <div class="d-flex flex-row justify-content-between">
         <div> Flex 1</div>
         <div> Flex 2</div>
         <div> Flex 3</div>
         <div> Flex 4</div>
     </div>
 </div>
</div>

初始状态：

调整大小后：

==>您可以阅读 Flex 的文档以获取更多信息 ..

https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 2

不确定是否需要使用 CSS 对其进行排序，因为 Bootstrap 类应涵盖此内容。

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

您的 4 件物品将在移动设备上自动堆叠并并排放置

Answer 3

默认情况下，min-width 是 auto，用于 flexbox 中的 flex 项目 - 所以将 min-width: 0 添加到 port-item 以重置它。

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

@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%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<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>