如何使用bootstrap4 flexbox使图像响应?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (79)

我有“顶级类别”部分,我试图使图像卡响应,但我无法实现它。不知道我错过了什么。我使用了bootstrap 4中的flexbox类,但它仍然不起作用。

以下是代码:

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>
提问于
用户回答回答于

你正在寻找一种在网格中使图像响应的方法。

你需要知道的一切都可以在Bootstrap 4的官方文档中找到.https://getbootstrap.com/

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
  </div>
</div>
用户回答回答于

你没有创建正确的div类行。这就是图像不灵活的​​原因。

<div class=container-fluid >
<div class=rows>
<div class=col-sm-3 col-md-3>
</div>
<div class=col-sm-3 col-md-3>
</div>
<div class=col-sm-3 col-md-3>
</div>
<div class=col-sm-3 col-md-3>
</div>
</div>
</div>

现在在类col之间应用图像标记,你将获得正确灵活的图像。

扫码关注云+社区

领取腾讯云代金券