Bootstrap 3下拉全寬

Question

使用引導程序3，我正在使用的網站有幾個導航欄，頂部帶有主頁，註冊...，另一個帶有搜索欄選項，然後是另一個主要類別（ navbar3），這是下拉菜單。問題在於navbar3。我需要下拉菜單佔據視圖寬度的全部寬度，不要超過980像素。現在，當單擊下拉菜單時，展開工具欄會從其父div的開頭以其尊崇的col-xs-2開始。我需要從行的開始處開始展開（如鞋類當前所做的那樣），並將整個寬度延伸至980像素。所以如果你點擊服裝，我希望下拉開始於鞋類下拉開始的同一點。我已經排除了一些對提出解決方案沒有任何影響的CSS。和品牌沒有一個彈出

#backgroundcategory { 
 
    margin: 0 auto; 
 
    height: 37px; 
 
} 
 
.maxwidth { 
 
    max-width: 980px; 
 
} 
 
.categorydropadjust { 
 
    width: 20%; 
 
} 
 
.categoryheaders { 
 
    padding-left: 0; 
 
    margin: 0 auto; 
 
    font-weight: 700; 
 
    font-size: 20px; 
 
    height: 37px; 
 
} 
 
.vcenter { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.centercat { 
 
    margin: 0 auto; 
 
} 
 
.dropdowncat:hover { 
 
    cursor: pointer; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="backgroundcategory"> 
 
    <div class="container-fluid maxwidth"> 
 
    <div class="row"> 
 
     <div class="col-xs-2 categorydropadjust"> 
 
     <div class="dropdown dropdowncat"> 
 
      <div class="dropdown-toggle categoryheaders vcenter" id="footwear" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>FOOTWEAR</span> 
 
      </div> 
 
      </div> 
 
      <ul class="dropdown-menu dropdown-menu-back" aria-labelledby="footwear"> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2 categorydropadjust"> 
 
     <div class="dropdown dropdowncat"> 
 
      <div class="dropdown-toggle categoryheaders vcenter" id="clothing" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>CLOTHING</span> 
 
      </div> 
 
      </div> 
 
      <ul class="dropdown-menu dropdown-menu-back" aria-labelledby="clothing"> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2 categorydropadjust"> 
 
     <div class="dropdown dropdowncat"> 
 
      <div class="dropdown-toggle categoryheaders vcenter" id="gear" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>GEAR</span> 
 
      </div> 
 
      </div> 
 
      <ul class="dropdown-menu dropdown-menu-back" aria-labelledby="gear"> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2 categorydropadjust"> 
 
     <div class="dropdown dropdowncat colortoggle"> 
 
      <div class="dropdown-toggle categoryheaders vcenter" id="deals" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <div class="centercat vcenter"><span class="glyphicon glyphicon-star goldcolor"></span><span class="goldcolor">DEALS</span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2 categorydropadjust"> 
 
     <div class="dropdown dropdowncat colortoggle"> 
 
      <div class="dropdown-toggle categoryheaders vcenter" id="brands" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
      <div class="centercat vcenter"><span class="glyphicon glyphicon-star goldcolor"></span><span class="goldcolor">BRANDS</span> 
 
      </div> 
 
      </div> 
 
      <ul class="dropdown-menu dropdown-menu-back" aria-labelledby="brands"> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      <li>Test</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/gswna389/2/

Answer 1

從下拉列表中刪除家長和position: relative使其相對的全寬條。位置相對使任何絕對子女都可以使用它作爲定位參考點。

如果將以下內容添加到CSS的底部，您將獲得所需的效果。

.categorydropadjust, .dropdown { position: static; } .container-fluid { position: relative; } .dropdown-menu { width: 100%; }

https://jsfiddle.net/gswna389/3/