Кнопки Twitter Bootstrap не реагируют на верхний элемент CSS - PullRequest
Новая
       22

Кнопки Twitter Bootstrap не реагируют на верхний элемент CSS

0 голосов
/ 21 марта 2012

Я пытаюсь изменить кнопки Bootstrap по умолчанию, чтобы они выглядели так, как будто они нажимают.

Эффект можно увидеть здесь: http://www.esecamalich.com/blog/before-&-after/

Я работал над этим с каркасом Less, и до сих пор я мог сделать все возможное, ЗА ИСКЛЮЧЕНИЕМ, чтобы кнопка сдвигалась вниз на 3 пикселя при активном. Это по существу убивает иллюзию и невероятно расстраивает.

Например, вот как выглядит мой Active State CSS / LESS: 

.btn.active,
.btn:active {
  top: 3px;
  #gradient > .blockyShadowActive();
}

Теперь, если я поменяю вершину на margin-top, тогда она работает, но имеет неприятный побочный эффект - перемещается вниз под всем, что глупо. Я перепробовал все, что мог, чтобы дезинфицировать эффект и посмотреть, что ему мешает, но не могу понять. Некоторые вещи, которые я пробовал:

  • Вытягивание кнопки из всех контейнеров, чтобы применить только свойства уровня тела
  • Удаление / комментирование всех стилей с помощью кнопок, кроме свойства top
  • Попытка санации кнопок и контейнеров в чистой версии Bootstrap с чистым CSS (не менее), удаление каждого свойства и все еще не может заставить его опуститься на 3 пикселя (или любого пикселя в этом отношении)

За свою жизнь я не могу понять, что мешает этому случиться. Кто-нибудь видел подобные вещи раньше?

...