Как вы получаете div в элементе эскиза в twitter bootstrap, чтобы правильно изменить размер?

60
5

Я использую twitter bootstrap, и я хотел сделать кроссфейдную анимацию на своих миниатюрных изображениях, поэтому я создал два отдельных класса с разными индексами z, которые затем помещал в эскиз миниатюр. Затем я использовал простой jquery, чтобы верхний слой исчезал на мышином компьютере и исчезал на мышином фоне. Все это выглядит великолепно, но теперь у меня возникают трудности с тем, что при изменении размера окна изображения не текут красиво.

Миниатюры начинают сглаживаться и перерисовываться неловко. Вот пример кода:

<div class="container">
<div class="row">

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail top">
<img class="hover_image" src="assets/img/hoversquare.png"/>
</div>
<div class="thumbnail bottom">
<img src="assets/img/hoversquare1.png"/>
</div>
</li>

... (there are four of these <li> elements

Классы, которые я использовал, были:

.bottom {
position: absolute;

z-index:1;
}

.top {
position: absolute;
z-index:2;
}

Кроме того, включен hte twitter bootstrap css файл, который: https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css

спросил(а) 2012-12-05T22:12:00+04:00 7 лет, 2 месяца назад
1
Решение
97

В принципе, все изменения размера выполняются с помощью медиа-запросов... Я бы попытался настроить css в соответствии с вашими потребностями... создайте свой-responsive.css и определите свой стиль для всех размеров медиа, которые вы хотите адресовать в этот файл... он переопределит bootstraps отзывчивый css и, таким образом, вы сможете реализовать любые изменения, которые вам нужны...

ответил(а) 2012-12-30T21:17:00+04:00 7 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема