html - 将文本放在图像旁边的 Bootstrap 行底部

Question

我有一行，其中有一个 2 宽的列用于图像，10 宽的列用于其他内容(导航栏等)。文本根据需要与图像分开并位于同一行，但我希望文本与图像位于同一“行”(与图像底部在同一水平面上)。我已经尝试过绝对相对定位和许多其他方法，但我似乎无法让它工作。什么是最好的方法？

<div class="row">
    <div class="col-md-2">
        <img src="../logo.png" width="100%" height="100%">
    </div>
    <div class="col-md-10">
        <p>test text</p>
    </div>
</div>

Answer 1

像这样向第二个 div 添加一个类。

<div class="row">
    <div class="col-md-2">
        <img src="../logo.png" width="100%" height="100%">
    </div>
    <div class="col-md-10 position_me">
        <p>test text</p>
    </div>
</div>

现在您可以添加如下内容:

.position_me { position: relative; } .position_me p { position: absolute; bottom: 0; left: 0; }

现在您的文字应该位于图像的底部。