Выпадение бутстрапа в коллапсе,

Я использую 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;
}

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

К сожалению, это обходное решение полностью ломается в Firefox.

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

ОТВЕТЫ

Ответ 1

Проблема здесь заключается в том, что в 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! */
}

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

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

Ответ 2

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

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

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

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

<div class="nav-collapse">

Затем, после расширения первого загрузочного бутстрапа, назначается фиксированная высота:

<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 необходим класс .collapse:

<div class="nav-collapse collapse">

Мне понадобилось время, чтобы понять!

Ответ 3

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

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

.in {
    overflow: visible !important;
}

Ответ 4

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

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

Это помогло мне надеяться, что это сработает для вас.