html - Bootstrap 3 下拉菜单全宽

Question

使用 bootstrap 3，我正在处理的网站有几个导航栏，顶部有主页、注册...，另一个有搜索栏选项，然后还有一个用于主要类别(navbar3)，它们是下拉菜单。问题出在 navbar3 上。我需要下拉菜单占据 View 宽度的整个宽度，不超过 980px。现在，当单击下拉菜单时，弹出窗口从其父 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 并使其相对于全宽栏。 Position Relative 使任何绝对子级使用它作为定位引用点。

如果将以下内容添加到 CSS 的底部，您将获得所需的效果。

.categorydropadjust, .dropdown { 位置:静态； } .container-fluid { position:relative； } 。下拉式菜单 { 宽度:100%； }

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