html - 如何使用 bootstrap 4 flexbox 使图像响应？

Question

我有“热门类别”部分，我正在尝试使图像卡片响应，但无法实现。不知道我错过了什么。我已经使用了 bootstrap 4 中的 flexbox 类，但它仍然不起作用。

这是 CODEPEN

代码如下:

index.html

.Top-Categories {
  width: 267px;
  height: 29px;
  padding-bottom: 24px;
  font-family: arial;
  font-size: 24px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #4a4a4a;
}

.Top-Categories-Img-Card {
  width: 1104px;
  margin-left: 205px;
  margin-right: 205px;
}

.Top-Categories-Img {
  width: 159px;
  height: 238px;
}

.Top-Categories-Label {
  width: 93px;
  height: 15px;
  padding-left: 0px;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #4a4a4a;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="Top-Categories-Img-Card">
  <h3 class="Top-Categories">Top Categories</h3>
  <div class="row">
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Fun & Recreation</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Education & Skill Development</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Informative & Motivational</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Health & Fitness</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Kids & Teens</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Home Maintenance</a>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

您的自定义 css hack(不必要的 hack)正在扰乱 Bootstrap。

要解决这个问题，请执行以下操作:

1. 添加container类到 <section>和

2. 删除所有自定义 CSS

现在一切都将按预期开始工作，您可以开始逐行添加自定义 css 以查看您的自定义 css 在哪里中断了 Bootstrap。

此外，您不需要编写类似 col-sm-12 col-md-2 的类.你只需要 col-md-2在那种情况下，因为在小于 md 的屏幕上它会自动默认为全宽，即相当于 col-sm-12 .