javascript - 如何放置一个 div，由 bootstrap 的 Navbar 打开

Question

我有一个 Bootstrap 粘性导航栏，其中包含一个按钮，该按钮打开一个下拉 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>

Answer 1

您可以通过最小的更改获得预期的结果。只需添加任何自定义类，例如:dropdown-pos至 <div class="dropdown">并给出样式 position: static .

The problem is the position: relative style which is default applied to dropdown class. Which make the dropmenu to stick at the bottom of its parent element.

检查工作演示 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;
}