如何使Flex行响应式Bootstrap 4 [英] How to make flex row responsive Bootstrap 4

问题描述

当前页面如下:

现在，将尺寸调整为可移动屏幕时，柔性框会溢出容器:

Now on resize to mobile screen flex boxes overflow the container:

HTML:

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，我尝试过使用媒体，但是nothig改变了

CSS, I tried with media but nothig has changed

.port-item {
width: 30%;
}

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

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

How can I make them fit to container or to make them to display on column

推荐答案

对于 flexbox 中的 flex项，默认min-width为auto-因此添加min-width: 0到port-item进行重置.

By default min-width is auto for a flex item in a flexbox - so add min-width: 0 to port-item to reset it.

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

Now the boxes will not overflow the container. Also you can use media queries to set the column flow in smaller devices:

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

这篇关于如何使Flex行响应式Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！