css - Bootstrap 4 更改 col 的宽度
问题描述
对不起我的英语,我是 Bootstrap 的新手....
我想构建 4 列,并且由于 Bootstrap col-sm-3的宽度太小或col-sm-4太大,我确实尝试在这里说,但是来这里展示
如何显示不是列之间的边距...
代码 CSS
.container {margin-top: 13rem; }
.product-grid{
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
overflow: hidden;
position: relative;
border: 4px solid #fff;
margin-top: 170px;
background-color: #ffffff;
}
.product-grid:before{
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.product-grid .product-image a{ display: block; }
.product-grid .product-image img{
width: 60%;
height: auto;
}
.product-grid { width: 300px;}
.product-grid .product-content{
padding: 18px;
position: relative;
z-index: 2;
background-color: white;
}
.product-grid .title{
font-size: 16px;
font-weight: 500;
margin: 0 0 10px 0;
}
.product-grid .title a{ color: #000; }
.product-grid .title a:hover{ color: #fa8231; }
.product-grid .price{
color: #fa8231;
font-size: 18px;
font-weight: 600;
}
.product-grid .price span{
color: #777;
margin: 0 0 0 5px;
font-weight: 300;
display: inline-block;
}
代码 HTML
<div class="container">
<div class="row">
<div class="col-sm-3 product-grid">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
<a href="#">la</a>
</h3>
<div class="price">
</div>
</div>
</div>
</div>
<div class="col-sm-3 product-grid">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
<a href="#">le</a>
</h3>
<div class="price"></div>
</div>
</div>
</div><div class="col-sm-3 col-md-3">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
<a href="#">li</a>
</h3>
<div class="price"></div>
</div>
</div>
</div><div class="col-sm-3 col-md-3">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<h3 class="title">
<a href="#">lo</a>
</h3>
<div class="price"></div>
</div>
</div>
</div>
</div><br><br>
</div>
请有人帮我解决这个问题,谢谢!
解决方案
推荐阅读
- rebuild - REPAIR_REBUILD 需要多长时间?
- automation - 使用 Power Automate 构建流程,通过电子邮件中的链接下载 CSV 文件并将文件上传到 Google Drive
- c# - 如何将外键从一个视图传递到另一个视图?
- c++ - C++ 代码不计算时间差,但它返回 -0
- webstorm - 在 WebStorm 中外部更改 CSS 文件后运行“从磁盘重新加载”
- flutter - 如何在颤振中编写模拟赌博应用跟踪器的方法/函数?
- python - 如何显示 Softmax 最高概率
- uwsgi - uWSGI 独立模式下的 http-to 是什么意思
- gstreamer - 如何在视频输出中保存 RTCP 时间信息
- python - 如何将一列添加到聚合的 Pandas 数据框中?