如何放置一个 div，由 bootstrap 的导航栏打开答案

【问题标题】：How to place a div, opened by bootstrap's Navbar如何放置一个 div，由 bootstrap 的导航栏打开
【发布时间】：2016-11-11 14:44:08
【问题描述】：

我有一个引导粘性导航栏，其中包含一个按钮，该按钮打开一个下拉 div，其中包含可点击链接的列表。

我的 Bootply（类似于 jsfidlle）：http://www.bootply.com/T69XCh0Vei

使用 CSS，我想将该 div 定位在导航栏下方，任何合理的屏幕宽度，包括移动设备。

将 div 的位置设置为“相对”对我没有帮助，因为它包含在导航栏内，这会导致导航栏的高度超出比例。

代码示例：

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar">
    <div class="container-fluid row">
        <div class="dropdown">
          <button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown">
          <span class="glyphicon glyphicon-menu-hamburger"></span>
            <span>NAVIGATE</span>       
          </button>

            <div id="navbar-titles-id" class="hidden-xs">
                <div class="col-md-2 col-sm-1">
                  <h5>Status</h5>
                </div>
                <div class="col-md-2 col-sm-1">
                  <h5>Code</h5>
                </div>
            </div>

            <div class="visible-xs" id="navbar-xs-id">
                <div class="result-title">
                    <h2>Status Code</h2>
                </div>
            </div>

          <ul class="dropdown-menu" id="dropdown-menu-nav-id">
            <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0"></li>
            <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1"></li>
            <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2"></li>
            <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3"></li>
          </ul>

        </div>
    </div>
</nav>

【问题讨论】：

也许可以尝试在下拉容器的边缘使用大众比例尺。 IE。 ul.dropdown-menu{margin-left:10vw} 并根据需要为较小的视口使用媒体查询。
@Korgrue 如果可能的话，我希望避免将 div 手动放置在每个屏幕的正确位置，这会变得非常混乱。

标签： javascript css twitter-bootstrap

【解决方案1】：

您可以通过最少的更改来获得所需的结果。只需添加任何自定义类，例如：dropdown-pos 到 <div class="dropdown"> 并赋予样式 position: static。

问题是默认应用的position: relative 样式到dropdown 班级。这使得下拉菜单粘在底部它的父元素。

查看工作演示Here

HTML：

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar">
  <div class="container-fluid row">
    <div class="dropdown dropdown-pos">
      <button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown">
              <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span>NAVIGATE</span>       
              </button>

      <div id="navbar-titles-id" class="hidden-xs">
        <div class="col-md-2 col-sm-1">
          <h5>Status</h5>
        </div>
        <div class="col-md-2 col-sm-1">
          <h5>Code</h5>
        </div>
      </div>

      <div class="visible-xs" id="navbar-xs-id">
        <div class="result-title">
          <h2>Status Code</h2>
        </div>
      </div>

      <ul class="dropdown-menu" id="dropdown-menu-nav-id">
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3" type="button"></li>
      </ul>

    </div>
  </div>
</nav>

CSS：

.dropdown-pos{
    position: static;
}

【讨论】：

【解决方案2】：

为浮动菜单设置上边距。根据您的小提琴：

.open>.dropdown-menu {
  display: block;
  margin-top: 54px;
}

【讨论】：

【解决方案3】：

问题是由类'col-md-1'引起的，对于这个类，'.dropdown' div 的高度=0；将高度设置为.dropdown 可以解决此问题；

<div class="dropdown" style="height:40px">

或向其添加 clearfix 类

<div class="dropdown clearfix">

【讨论】：

【解决方案4】：

与往常一样，您可以对值进行硬编码以实现所需的结果，但我认为最好的方法是按照dropdown 的建议添加clearfix 并从navbar 类中删除min-height。下拉菜单显示在父元素下，导航栏的价值更大，所以下拉菜单和导航栏是重叠的。如果你想有更大的差距，只需在导航栏上使用line-height 将元素垂直居中并据此设置元素样式。

工作示例http://www.bootply.com/giO0PF2LGs

【讨论】：