【发布时间】：2019-06-12 02:33:54
【问题描述】：
我正在努力使用 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 时，它们会向左移动。我想在列的中间制作图像，文本的开头应该在图像的开头，文本的结尾在图像的末尾，按钮也应该在图像的开头，就像这里：
【问题讨论】：
-
@Zim 您在重复问题中发布的解决方案是对引导网格系统如何工作的广泛解释，而这里的问题缩小到图像和按钮的基本 css 修改，而不是网格系统作为所有的。他的引导列没有问题，而是列内的内容。投票重新开放。
-
答案是添加一个新的 css 类
img { width: 100%; }或类似的东西，使图像看起来像您附加图像中的布局。试一试 - codepen.io/brooksrelyt/pen/MZdLYj -
这里的问题是列不是该行的直接子级，并且要学习水平居中，还有 许多 其他答案。
标签： css image bootstrap-4 centering