Bootstrap 文字和图片

Question

我正在使用 bootstrap，并且我有一行包含 2 个 div。第一个 div 包含图像，第二个 div 包含文本。

我希望文字达到图像的边缘，但图像没有填满整个 div。如果我将 div 变小，图像会缩放并导致同样的问题。

两个 div 都是 col-xl-6，但图像居中，在两侧留有空隙，因此图像末尾和文本开头之间有一个 space .

<div class="row">
    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
            <div class="col-md-7 offset-md-1 col-sm-9 col-8">
                <div class="carousel-item active mt-4"><img src="{{ project.image.url}}" alt="img" class="img-thumbnail mx-auto d-block"></div>
            </div>  
    </div>
    <div class="col-xl-6 col-lg-12 col-md-12">
        <div class="mt-4 mb-4">
<label class="main-content-label my-auto pt-2 tx-15-f">{{project.name}}</label>
            <h6 class="mt-4 fs-16">Description</h6>
            <p>{{project.description}}</p>
        </div>
    </div>
</div>

希望这有意义吗？

谢谢

Answer 1

从每列中删除内部列，列中的列太多。

<div class="row">
    <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
        <div class="carousel-item active mt-4"><img src="{{ project.image.url}}" alt="img" class="img-thumbnail mx-auto d-block"></div>
    </div>
    <div class="col-xl-6 col-lg-12 col-md-12">
        <label class="main-content-label my-auto pt-2 tx-15-f">{{project.name}}</label>
        <h6 class="mt-4 fs-16">Description</h6>
        <p>{{project.description}}</p>
    </div>
</div>

Bootstrap 文字和图片

Bootstrap text and image

html

bootstrap-4