раскрывающийся список bootstrap в collapse,

Я использую Bootstrap 2.0.3, с раскрывающимися меню внутри divs, которые складываются / расширяются. Когда выпадающее меню переполняет div, они отключаются (но они не должны). Jsfiddle для иллюстрации:http://jsfiddle.net/t3wFK/1/

в Bootstrap 2.0.2 меню не отключается:http://jsfiddle.net/u3wkK/

Я нашел половину обходного пути, используя правило css следующим образом:

#stuff.in {
  overflow: visible;
}

класс css' in ' получает добавлено bootstrap всякий раз, когда div, отмеченный "collapse", расширяется.

к сожалению, этот обходной путь полностью ломается в Firefox.

какие идеи? Я рассматриваю возможность понижения до Bootstrap 2.0.2, но это было бы больно.

14
collapse css jquery overflow twitter-bootstrap

4 ответов

проблема здесь заключается в том, что в 2.0.3 Bootstrap применяет .collapse класс #stuff элемент. В bootstrap css есть стиль:

.collapse {
    overflow: hidden;
}

однако, когда вы расширяете .collapse цели overflow собственность остается hidden.

не уверен, что это ошибка или нет (нужно было бы заглянуть глубже, чтобы увидеть, есть ли какие-либо недостатки в этом), но изменение правила для .collapse.in будет работать.

.collapse.in {
    height: auto;  /* this style already exists in bootstrap.css */
    overflow: visible;  /* this one doesn't. Add it! */
}

если бы вы предпочитайте не изменять CSS Bootstrap (который может иметь непреднамеренные побочные эффекты, как отмечено в комментариях), вы можете добавить shown и hide обработчики событий для вашего #stuff элемент для изменения overflow свойства:

$('#stuff').on({
    shown: function(){
        $(this).css('overflow','visible');
    },
    hide: function(){
        $(this).css('overflow','hidden');
    }
});
17

Я пробовал обходной путь с Bootstrap 2.1.1, и он ломается в Firefox 16, работая только в первый раз, а затем не открывается вообще.

в моем случае проблема была только в первый раз, когда посетитель открыл складной элемент и была применена встроенная фиксированная высота. Во второй раз высота была установлена на auto.

Итак, я обнаружил, что проблема зависит от html-кода для элемента nav-collapse, который не имеет состояния, объявленного сначала:

здесь сначала код:

<div class="nav-collapse">

затем после расширения в первый раз bootstrap назначает фиксированную высоту:

<div class="nav-collapse in collapse" style="height: 286px;">

и после закрытия первый раз высота до 0:

<div class="nav-collapse collapse" style="height: 0px;">

Открытие во второй раз, и он отлично работает с автоматической высотой:

<div class="nav-collapse collapse" style="height: auto;">

так класс .свернуть необходимо для javascript, чтобы установить автоматическую высоту:

<div class="nav-collapse collapse">

мне потребовалось некоторое время, чтобы разобраться!

4

попробуйте использовать !important флаг, как кажется в Firefox, свойства читаются с другим приоритетом по какой-то причине.

http://jsfiddle.net/t3wFK/2/

.in {
    overflow: visible !important;
}
1

я проводил много исследований по этому вопросу, нашел решение проблемы, добавив эту строку кода в css, я нашел это в https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

.collapse.in[style="height: auto;"] {overflow: visible;}

Это сделал трюк для меня надеюсь, что это работает для вас

1