多列下拉菜單行內塊不能正常工作

我正在使用django動態加載的多列下拉菜單。我使用django模板來標記標籤，它似乎在列高中添加空格。菜單分爲4欄，顯示類別和子類別。有些類別具有子類別（1個或多個），有些不包含。多列下拉菜單行內塊不能正常工作

   <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Prods<b class="caret"></b></a> 

         <ul class="dropdown-menu row"> 
          {%for c in categ %} 
          <li class="col-sm-3"> 
           <ul>      
           <li><a href="/">{{c.name}}</a></li> 
          {% for s in sub_cat %}         
           <li><a href="/">{{s.name}}</a></li>        
          {% endfor %} 
           </ul> 
          </li> 
          {% endfor %} 
          <li class="col-sm-3"> 
           <ul> 
           <li class="dropdown-header"><a href="/>All</a>/li> 
           </ul> 
          </li> 
         </ul> 
        </li>

這是我在第一張照片中得到的，以及我在第二張照片中需要做的。

來源

2016-03-03 lorenag83

您可能不得不使用類似http://masonry.desandro.com/來實現您所需的佈局 – partypete25

使用磚石JS http://masonry.desandro.com/我能達到您想要的佈局。你不能使用引導網格來做到這一點，因爲浮動的div不能這樣工作。

這裏要注意的最大的問題是下拉導航欄中html的結構 - 因此，您必須對subnav的填充方式進行一些相對較小的更改。

例如：

<li class=" grid-item"><a href="/">Cat 3</a> 
    <ul> 
     <li><a href="/">Sub 1</a></li> 
     <li><a href="/">Sub 2</a></li> 
     <li><a href="/">Sub 3</a></li> 
    </ul> 
</li>

對於我用百分比列格，因爲這是自舉電網是如何工作的，所以我認爲這是一個敏感的網站使用？如果不是，您可以提供固定的像素寬度。您必須在下拉式導航欄上提供某種形式的固定尺寸，或者至少有一個最小寬度的選項，因爲它是絕對定位的。

爲了這個工作，你必須初始化網格JavaScript，當下拉式導航可見時，否則用於定位每個項目的JS不會工作。自舉下拉

$('.dropdown').on('shown.bs.dropdown', function() { ...

更多信息，請訪問： http://getbootstrap.com/javascript/#dropdowns

你應該然而，給你的下拉菜單中的ID，然後在javscript而是使用它，否則，它可能會導致一些問題，如果你有更多的比您網站上的一個下拉實例。

http://codepen.io/partypete25/pen/BKNrBb

參考砌築文檔的詳細信息。

希望這會有所幫助！

來源

2016-03-03 04:28:49 partypete25

謝謝，真的有幫助！我設法使其工作，但它沒有響應。我想成爲小屏幕上的一列，就像普通的引導菜單一樣。我添加了@media屏幕和（最大寬度：768px）{.grid-sizer {width：10％; }}但沒有按預期工作。 – lorenag83

只需將寬度100％添加到網格和網格項目，現在似乎在小屏幕上工作。 – lorenag83

多列下拉菜單行內塊不能正常工作

回答

相關問題