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

现在你的文字应该在图片的底部。

Answer 2

我想你想在图像上添加标题。

尝试使用css float元素。

img{
    float:right;
}

如果这不起作用，请尝试将行位置类型设置为相对位置，将col对象设置为绝对位置，这样您就可以控制该行。

我希望其中一种方法可以解决您的问题。如果没有看看这个网站：http://webdesign.about.com/od/graphics/ht/caption_images.htm

解释了如何使用css为图像添加标题。

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

2 个答案: