css - 如何使用 Bootstrap 4 连续三列响应式图像文本和链接?
问题描述
我正在努力使用 Bootstrap 4 连续设置三个响应列。
.buttons {
border: 1px solid #e86225;
color: #e86225 !important;
padding: 10px 20px;
font-size: 14px;
}
.buttons:hover {
border: 1px solid #ffffff;
background-color: #e86225;
color: #ffffff !important;
transition: background-color 1s, border 1s, color 1s;
}
.container-custom {
padding-top: 80px;
padding-bottom: 80px;
}
.custom-link {
padding: 15px 0;
}
.container p {
margin: 25px 0;
max-width: 400px;
}
@media(max-width: 767px){
.container-custom {
padding-top: 50px;
padding-bottom: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row container-custom justify-content-center">
<h2>Blog</h2>
<div class='d-flex flex-wrap pt-5'>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
</div>
</div>
问题是当媒体屏幕宽度小于 767px 时,它们会向左移动。我想在列的中间制作图像,文本的开头应该在 imaeg 的开头,文本的结尾在图像的末尾,按钮也应该在图像的开头,就像这里:
解决方案
只需将 width:100% 添加到您的图像中,以便它们占据列上的所有空间
.buttons {
border: 1px solid #e86225;
color: #e86225 !important;
padding: 10px 20px;
font-size: 14px;
}
.buttons:hover {
border: 1px solid #ffffff;
background-color: #e86225;
color: #ffffff !important;
transition: background-color 1s, border 1s, color 1s;
}
.container-custom {
padding-top: 80px;
padding-bottom: 80px;
}
.custom-link {
padding: 15px 0;
}
.container p {
margin: 25px 0;
max-width: 400px;
}
img{
width:100%;
}
@media(max-width: 767px){
.container-custom {
padding-top: 50px;
padding-bottom: 50px;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row container-custom justify-content-center">
<h2>Blog</h2>
<div class='d-flex flex-wrap pt-5'>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHBMzMRL0g3ELio_DdCRvdajdF812AQPP2AbmM_jYr_66CnwgS" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
<div class="col-sm-12 col-md-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFsb6TxovKdTNx-8gdo1R01nZXxRRauett2KQ_ci76VgjK2hR7" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh sem, ultricies sit amet tellus ut, iaculis interdum ante. Quisque at nibh ac diam faucibus congue.
</p>
<div class="custom-link">
<a href="" class="buttons">Read more ></a>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 在不旋转内容的情况下更改设备方向
- php - 错误:无法重新启动“apache”:无法启动服务:AH00543:httpd:添加虚拟主机时 MacOs Catalina 上的用户名错误
- matplotlib - 如何在 jupyterlab notebook 上动态绘制图形
- php - 将 php 更新到 php 8 后 guzzlehttp/guzzle 不起作用
- nearprotocol - Near-sdk-rs 中的应付装饰器有什么作用?
- git - 进行多次合并时提取正确的 git 日志
- javascript - Vue js 检测何时创建 img 标签
- r - 删除多个空格但在 R 中保留单个空格
- sql - 当行没有匹配的 LEFT JOIN 时,BigQuery 正在创建一个 NULL 结构
- javascript - 随机“未定义”被插入到字符串中