如何使用Bootstrap 4在一行中响应三列的图像文本和链接

Question

我正在努力使用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时，它们会向左移动。我想在列的中间制作图像，文本的开头应该在图像的开头，文本的结尾在图像的结尾，按钮应该在图像开头也像这里一样：

在此处输入图像描述

Answer 1

只需为图像添加宽度：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>

Answer 2

图像宽度可能是问题所在。将img { width: 100%; }和class="img-fluid"添加到您的img标签中。

添加到css：

img { width: 100%; }

HTML:

<img  class="img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQh3Afn3A1FKb24tpO6eAdqr8hCdnafjqwCNqgjdSAWK1igoWfk" alt="">

或者类似的东西，使图像看起来像你所附图像中的布局。

使用代码的代码笔示例：https://codepen.io/brooksrelyt/pen/MZdLYj