如何使用 Bootstrap 4 使带有图像文本和 link 的连续三列具有响应性？

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 时，它们会向左移动。我想在列的中间制作图像，文本的开头应该在 imaeg 的开头，文本的结尾在图像的结尾，按钮也应该在图像的开头，如下所示：

enter image description here

Answer 1

图像宽度可能是问题所在。将 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

Answer 2

只需将 width:100% 添加到您的图片中，它们就会占据列中的所有 space

.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>

如何使用 Bootstrap 4 使带有图像文本和 link 的连续三列具有响应性？

How to make responsive three columns in a row with image text and link using Bootstrap 4?

css

image

centering

bootstrap-4