Question

我正在使用Bootstrap 4连续设置三个响应列。

a*d - b = d

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

问题是，当媒体屏幕宽度小于767px时，它们将向左移动。我想使图像位于列的中间，文本的开头应位于图像的开头，文本的结尾应位于图像的结尾，按钮也应位于图像的开头，如下所示：

enter image description here

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

如何使用Bootstrap 4使响应式三列连续带有图像文本和链接？

2 个答案: