崩潰中的引導下拉菜單，

我正在使用Bootstrap 2.0.3，下拉菜單裏面是可摺疊/可展開的div。當下拉菜單溢出div時，它們會被切斷（但它們不應該）。的jsfiddle來說明：http://jsfiddle.net/t3wFK/1/崩潰中的引導下拉菜單，

在引導2.0.2菜單不會被切斷：http://jsfiddle.net/u3wkK/

我發現半個解決方法通過使用CSS規則如下：

#stuff.in { 
    overflow: visible; 
}

「關於在'每當標有'collapse'的div被擴展時，CSSss就會被bootstrap添加。

很抱歉，此變通辦法在Firefox中完全失效。

任何想法？我正在考慮降級到Bootstrap 2.0.2，但那會很痛苦。

來源

2012-08-12 chris6953

這裏的問題似乎是在2.0.3，引導的.collapse類適用於#stuff元素。在引導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（可能會產生意想不到的副作用在評論中提到的），你可以添加shown和hide事件處理程序到你的#stuff元素來修改overflow屬性：

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

來源

2012-08-15 01:38:18 jackwanders

與對其他答案的評論一樣，「overflow：hidden」沒有改變的原因是因爲CSS轉換在某些情況下看起來很糟糕，特別是依賴於這個類的手風琴。絕對不是一個錯誤。 – merv 2012-08-15 01:47:28

有效。我已經更新了我的回答，以使用事件處理程序，而只是在'.collapse'元素完全展開時修改'overflow'屬性。 – jackwanders 2012-08-15 01:52:17

得到我的投票;-) – merv 2012-08-15 01:54:34

嘗試使用!important標誌，就像在Firefox中看起來的那樣，由於某種原因，屬性會以不同的優先級讀取。

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

.in { 
    overflow: visible !important; 
}

來源

2012-08-12 21:49:07

你可能想要更新jsfiddle，以便它包括CSS。 – darksky 2012-08-12 22:30:44

@darksky謝謝，我發佈了錯誤的鏈接 – 2012-08-12 22:39:10

我想補充一點警告，這將會導致手風琴組件的轉換。如果你確實使用了這個，絕對應用它，而不僅僅是'.in'。 – merv 2012-08-15 01:30:28

我試過你用Bootstrap 2.1.1的解決方法，它在Firefox 16中打破，只是第一次工作，然後根本不打開。

在我的情況下，問題只是第一次訪問者打開可摺疊元素並應用內聯固定高度。第二次高度設置爲自動。

所以我發現這個問題依賴於導航崩潰元素至極的HTML代碼沒有一個國家在第一次宣佈：

這裏的最初代碼：

<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">

我花了一段時間弄清楚！

來源

2012-10-22 14:58:06

我是做了很多研究此找到了解決問題的辦法，加入這行代碼的CSS，我發現這在https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

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

這奏效了，我希望這個作品爲你

來源

2013-06-11 05:27:22 LegendaryAks

崩潰中的引導下拉菜單，

回答

相關問題