找到你要的答案

Q:My img div is floating in the other div

Q:我的IMG div漂浮在其他分区

I'm trying to get my bootstrap img-responsive to get to the bottom of the div, but it no matter what I do, it won't move. I've tried altering the img-resposive CSS file setting height:to 0and bottom:to 0 but it doesn't fix the problem. I'm new to this and probably missing something out, so please be tolerant.

<!--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>

I'm trying to get my bootstrap img-responsive to get to the bottom of the div, but it no matter what I do, it won't move. I've tried altering the img-resposive CSS file setting height:to 0and bottom:to 0 but it doesn't fix the problem. I'm new to this and probably missing something out, so please be tolerant.

<!--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>
answer1: 回答1:

Like the comments mention you should not update the bootstrap css file directly. You should create your own custom CSS style sheet and update that instead!

Based on the code you provided (which isn't much) there are a couple of ways to make your image show at the bottom of the container.

CSS using table-cell

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

CSS using absolute positioning:

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

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

HTML will be the same for either:

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

Hopefully this is enough to get you started based on the code you provided.

喜欢评论说你不应该更新CSS文件直接引导。你应该创建你自己的自定义CSS样式表和更新,而不是!

根据您提供的代码(这并不多)有几个方法使您的图像显示在容器的底部。

CSS使用表格单元格

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

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>

希望这足以让你开始根据你提供的代码。

jquery  html  css  twitter-bootstrap