0

Работал над созданием фотоальбома, заметил интересный эффект: <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>

1 ответ 1

2

Попробуйте добавить overflow: hidden; в CSS .gallery{}

2
  • Спасибо, сработало! Интересно, какое значение выставляет bootstrap по-молчанию...
    – Rumata
    17 янв 2017 в 15:25
  • 1
    По умолчанию у всех элементов задан стиль overflow: visible. 18 янв 2017 в 7:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.