Question

我正试图让我的引导程序img-responsive到达div的底部，但无论我做什么，它都不会移动。我已尝试将img-resposive CSS文件设置height:更改为0，将bottom:更改为0，但它无法解决问题。我是新手，可能会遗漏一些东西，所以请宽容。

<!--this is the bootstrap.css file -->

.img-responsive,
    .thumbnail > img,
    .thumbnail a > img,
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: 0;
    bottom: 0;
}

<!--and this is the html -->

<div class="col-md-9 hidden-sm">
    <img src="img/valencia.png" class="img-responsive animated fadeInRight" alt="mockup">
</div>

Answer 1

就像提到的评论一样，不应该直接更新bootstrap css文件。您应该创建自己的自定义CSS样式表并更新它！

根据您提供的代码（不多），有几种方法可以让您的图像显示在容器的底部。

使用table-cell

的CSS

.yourcustomclassname {
    display: table-cell;
    vertical-align: bottom;
}

使用absolute定位的CSS：

.yourcustomclassname {
    display: block;
    position: relative;
}

.yourcustomclassname img {
    position: absolute;
    bottom: 0;
    left: 0;
}

HTML也是相同的：

<div class="col-md-9 hidden-sm yourcustomclassname">
    <img src="img/valencia.png" class="img-responsive animated fadeInRight" alt="mockup">
</div>

希望这足以让您根据自己提供的代码开始使用。

我的img div漂浮在另一个div中

1 个答案: