Bootstrap 3選擇菜單在sm或xs視圖中不可選擇

Question

在移動視圖中使用引導時，選擇顯示在同一行上的菜單不可選。它可能與我的引導網格用法有關。

見我codeply example here

首先嚐試在默認桌面視圖選擇菜單。工作正常。然後將屏幕大小切換到平板電腦或智能手機，然後切換選擇菜單。

現在，當選擇菜單上出現不同的行時，在任何視圖中都沒有問題。看到這個codeply example

我在這裏錯過了什麼？它開始讓我有點瘋狂。

Answer 1

在桌面屏幕（上述引導的md屏幕大小），你有一排與類頁面控件，其中有三個的cols：

• 工具排序（帶班同事MD-3）
• 工具尋呼（具有類COL-MD-2）
• 工具-分頁（具有類COL-MD-7）

網格列總數爲12，一切正常。

這個問題似乎非桌面屏幕上（以下引導的md屏幕大小），你可以在第三山坳工具 - 分頁全寬展開控制檯檢查和它覆蓋兩個的cols與選擇菜單，這就是爲什麼他們不可選。

解決這個問題的最簡單的方法是添加額外的山坳電網屏幕較小，例如：

<!-- Pagination and search controls --> 
    <div id="ember1330" class="row page-controls ember-view"> 
     <div class="col col-md-3 col-sm-2 col-xs-6 pull-left tools-sort"> 
      ... 
     </div> 
     <div class="col col-md-2 col-sm-2 col-xs-6 pull-left tools-paging"> 
      ... 
     </div> 
     <div class="col-12 col-md-7 col-sm-8 col-xs-12 text-right tools-paginaton"> 
      ... 
     </div> 
    </div> 

所有我已經加入這些類COL-SM-2和COL-XS- 6添加到帶有兩個選擇框的列，以及col-sm-8和col-xs-12到分頁欄。

這樣網格是所有移動設備和電網的cols的總和罰款12再次SM和XS屏幕。