如何使用bootstrap4 flexbox使图像响应？
如何使用bootstrap4 flexbox使图像响应？
提问于 2018-03-04 17:55:18
我有“顶级类别”一节，我试图使图像卡响应，但无法实现。不知道我错过了什么。我使用了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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49094104
复制相关文章
相似问题