Bootstrap 3 Dropdown全宽

Question

使用Bootstrap 3，我正在处理的站点具有几个导航栏，一个带有主页，注册等的顶部，另一个带有搜索栏选项，然后是另一个主要类别（navbar3），它们是下拉菜单。问题出在navbar3。我需要下拉菜单占用视图宽度的整个宽度，但不能超过980px。现在，单击下拉菜单时，弹出窗口以其受尊敬的col-xs-2从其父div的开头开始。我需要弹出控件从该行的开头开始（就像鞋类当前正在做的那样），并将整个宽度扩展到980px。因此，如果您单击服装，我希望该下拉菜单在鞋类下拉菜单开始的同一点开始。我已经排除了一些对解决方案没有影响的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/