html - Bootstrap 将组件导航置于其他组件之上

标签 html css twitter-bootstrap

我是第一次尝试使用 Twitter Bootstrap(也是第一次使用前端),但是我已经遇到了问题。一是 navbar 总是显示在其他组件之上。

<body>
      <nav class="navbar navbar-default navbar-fixed-top">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
        </nav>

      <div class="container theme-showcase" role="main">
          <div class="alert alert-warning" role="alert">
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
          </div>
      </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

在这种情况下,例如 div .container .theme-showcase 在下面,我永远看不到它。

我错过了什么?谢谢。

enter image description here

编辑:移除固定顶部不是解决方案,我需要导航始终存在

最佳答案

.navbar-fixed-top 将使导航栏 position: fixed 将其从流程中移除,以便其他元素将从页面顶部开始。如果你想要一个粘性导航,将顶部填充添加到 .container.theme-showcase 或者如果你想要静态导航栏,那么只需删除 .navbar-fixed-top 类.

关于html - Bootstrap 将组件导航置于其他组件之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35816459/

相关文章:

javascript - 为什么第一个复选框起作用但第二个复选框不起作用?

javascript - 点击放大图片。 JavaScript、CSS 和 HTML

html - CSS 目录 - 嵌套列表后计数器不会重置

jquery - 如何清除 DIV 的内容?

jquery - CSS 样式的列根据子元素的数量移动垂直位置

javascript - 检查所有 Bootstrap Accordion 是否打开并执行某些操作

html - StreamReader 返回符号(使用 HttpWebRequest)

CSS float div,不缩小到内容

css - 更改 Plone 5.02a 的 barceloneta.css?

javascript - 无法将 AngularJS 变量传递给 Bootstrap 中的 div 模态