Question

使用bootstrap 3，我正在处理的网站有几个导航栏，一个带有主页的顶部，注册，...，另一个带有搜索栏选项，然后是另一个用于主要类别（navbar3），这些是下拉菜单。问题出在navbar3上。我需要下拉列表占据视图宽度的整个宽度，不超过980px。现在，当单击下拉列表时，弹出窗口将在其父div的开头与其受尊重的col-xs-2开始。我需要在行的开头开始弹出窗口（就像鞋子当前正在做的那样）并将整个宽度扩展到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

从下拉列表中移除tar -zxvf gcc-4.4.5.tar.gz cd gcc-4.4.5/ ./configure make sudo make install sudo apt-get install gsoap并将其设置为全宽度栏的相对值。 Position Relative使任何绝对孩子都使用它作为它的定位参考点。

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

position: relative

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

Bootstrap 3下拉全宽

1 个答案: