Сделайте так, чтобы элемент перекрывал содержимое под ним, используя Bootstrap

Я только начал играть с Twitter Bootstrap и пытаюсь сделать так, чтобы изображение в строке перекрывало содержимое под ним. Как я могу это сделать? Я попытался указать содержимое ниже отрицательного поля, но, похоже, это не работает в инструментах разработчика Chrome. Вот ссылка на то, что у меня сейчас есть, но просто вкратце:

<div class="container" role="main">
  <div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/252x136" alt="...">
      </a>
    </div>
    <div class="col-md-8">
    </div>
  </div>

  <div class="jumbotron">  
  </div>
</div>

Как видите, <img> толкает весь джамботрон вниз. Вместо этого я бы хотел, чтобы он перекрывался до тех пор, пока размер экрана не рухнет (в ответ), а затем в этом случае изображение больше не должно перекрываться.

ОБНОВЛЕНИЕ

В итоге я объединил решения @JoshC и @Adrian, чтобы получить лучшее из обоих:

@media (min-width: 992px) {
  #overlap {
    height: 70px;
  }
}

css twitter-bootstrap-3
person Abdullah Jibaly    schedule 10.03.2014    source источник
comment
Дополнительный вопрос: stackoverflow.com/questions/22316391/   -  person Abdullah Jibaly    schedule 11.03.2014

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете абсолютно точно позиционировать элемент .col-md-3.img, а затем перемещать .col-md-8.nav вправо. Я добавил несколько классов к элементам, а затем поместил стиль в медиа-запрос, чтобы убедиться, что он не конфликтует со стилями для мобильных устройств/планшетов. Кажется, он хорошо работает на всех размерах экрана.

ОБНОВЛЕННЫЙ ПРИМЕР ЗДЕСЬ - ПОЛНЫЙ ПРИМЕР ЭКРАНА

@media (min-width: 992px) {
  .col-md-3.img {
      position: absolute;
      text-align: center;
  }
  .col-md-3.img .thumbnail {
      display:inline-block;
  }
  .col-md-8.nav {
      float: right;
  }
}

Добавьте text-align:center, чтобы центрировать элемент .thumbnail, который теперь также inline-block, чтобы исправить проблемы, связанные с фоном, возникающие из-за абсолютного позиционирования.

person Josh Crozier    schedule 10.03.2014
comment
Это странно, похоже, что ваша ссылка на пример такая же, как у @Adrian, что-то как-то было перезаписано? - person Abdullah Jibaly; 10.03.2014
comment
Дополнительный вопрос: stackoverflow.com/questions/22316391/ - person Abdullah Jibaly; 11.03.2014

arrow_upward
3
arrow_downward

Вы можете добиться этого, добавив высоту в строку. В приведенной ниже демонстрации я добавил в строку id=overlap.

ДЕМО

CSS

#overlap{
  height:90px;
}
person Adrian Enriquez    schedule 10.03.2014
comment
Это выглядит хорошо, но, похоже, не работает на меньшем размере экрана. Я попробую совместить это с подходом @JoshC. - person Abdullah Jibaly; 10.03.2014
comment
Дополнительный вопрос: stackoverflow.com/questions/22316391/ - person Abdullah Jibaly; 11.03.2014