ブートストラップ3ドロップダウンフルウチ

ブートストラップ3を使用して、私が取り組んでいるサイトには、いくつかのナビゲーションバー、ホーム、サインアップ、トップ...、検索バーオプション付きの別のもの、さらにメインカテゴリnavbar3）、これはドロップダウンです。問題はnavbar3にあります。私は980pxを超えないように、ビューの幅の全幅を取るためにドロップダウンが必要です。今すぐドロップダウンがクリックされると、親divの冒頭で、尊重されたcol-xs-2でフライアウトが開始されます。フットウェアは、行頭（フットウェアが現在やっているように）から始まり、全幅を980ピクセルまで拡張する必要があります。だから、衣服をクリックすると、そのドロップダウンがフットウェアのドロップダウンが始まる同じポイントから始めることが欲しいです。私は解決策を考え出すことに何の影響も及ぼさないCSSのいくつかを除外しました。そしてブランドはブートストラップ3ドロップダウンフルウチ

#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/

出典

2016-09-26 Jgoo83