My img div плавает в другом div

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

Как комментарии о вас не должны обновляют CSS файл начальной загрузки непосредственно. Вы должны создать свою собственную таблицу стилей CSS и обновить это вместо этого!

Основанный на коде, который вы указали (это не так много), есть несколько способов сделать изображение в нижней части контейнера.

CSS с использованием table-cell

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

CSS с использованием absolute позиционирования:

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

Надеюсь, этого достаточно, чтобы вы начали на основе на код, который вы указали.