Работал над созданием фотоальбома, заметил интересный эффект: <div>
с фоновым изображением, который находится внутри ссылки <a>
, выходит за ее пределы. Это можно увидеть, если навести курсор на изображение.
Покопавшись в стилях, понял, что дело именно в Bootstrap
, но в чем конкретно пока не нашел. Буду благодарен за подсказку.
Заранее спасибо.
Пример кода находится в JSFiddle - https://jsfiddle.net/o7y4m1ut/ там все работает. Здесь фрагмент кода после подключения Bootstrap отображается некорректно. Не понимаю почему...
.ImgContainer {
min-width: 100px;
min-height: 150px;
margin: 5px;
}
@media (min-width : 1200px) {
.ImgContainer {
margin: 0;
}
}
.imgOne {
background-image: url(http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg);
background-position: center;
background-size: cover;
}
.gallery {
display: block;
/* border: dashed red 3px; */
position: relative;
}
.gallery:hover {
background-color: #555;
text-decoration: none;
color: white;
}
.myCol {
min-height: 180px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="secionSecond">
<div class="container">
<div class="row">
<section class="col-md-4 col-lg-6 col-xs-12 col-sm-6 myCol firstCol">
<a class="gallery gallerySix" href="#">
<div class="row">
<div class="col-lg-5 ImgContainer imgOne">
<!-- <img src="img/summer-1.jpg" alt="There should be an image!"> -->
</div>
<div class="col-lg-7"><h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae sagittis ex.</p>
</div>
</div>
</a>
</section>