证明内容块引导程序的合理性 4.

Question

我有这个代码：

.banner {
  background: #f9f9f9;
  width: 300px;
  height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex justify-content-between">
            <div class="banner"></div>
            <div class="banner"></div>
            <div class="banner"></div>
        </div>
      </div>
</section>

我需要在手机和平板电脑上显示：用间距banner阻止这些元素。我怎样才能用flex做到这一点？现在我得到内联的元素。

Answer 1

根据视口，您可以使用此 d-* 类

所以这个

<div class="d-flex justify-content-between">

将

<div class="d-lg-flex justify-content-between">

这将使.banner块（div的默认行为）直到大视口

Answer 2

您可以在小屏幕上更改方向 （https://getbootstrap.com/docs/4.2/utilities/flex/#direction）

.banner {
  background: red;
  border:1px solid;
  min-height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex  flex-column flex-sm-row justify-content-between">
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
        </div>
      </div>
</section>