导航栏未显示为块

Ryandonohue

由于某种原因,我使用引导主题的导航栏未显示为阻止。我正在为index.html页面使用轮播模板,并希望在其余页面上使用相同的主题,只是没有轮播。但是,当我取出旋转木马时,第二个div坐在我的导航栏下面。

这是我的导航栏的代码:

<div class="navbar-wrapper">
  <div class="container">

    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="index.html">Ecstatic Entertainment SK</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li class="active"><a href="">What We Offer</a></li>
            <li><a href="#contact">Build Your Event</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </div>
</div>

以及指向我的小提琴的链接,将我的CSS放在bootstrap css的顶部:

https://jsfiddle.net/czz2Lm1n/

迈克尔·本杰明(Michael Benjamin)

您的导航栏div(.navbar-wrapper)实际上是一个块元素,但它也是绝对定位的。

因此,它已从正常流程中删除,其他div则忽略了它。因此,您的内容(“第二格”)已移至主体边缘,因为它看不到任何其他框可将其停止。

在您的代码中,一种快速的解决方案是更改类的position属性的值:

原来的

.navbar-wrapper{position:absolute;top:0;right:0;left:0;z-index:20}

修改

.navbar-wrapper{position:relative;top:0;right:0;left:0;z-index:20}

这行得通。这是您修改过的小提琴:https : //jsfiddle.net/czz2Lm1n/3/

现在,您可以position:absolute在的所有子元素上使用.navbar-wrapper,它们将相对于包含块定位.navbar-wrapper

如果您想了解有关此position属性的更多信息,请阅读以下文章:https : //developer.mozilla.org/en-US/docs/Web/CSS/position

希望这可以帮助。祝你好运!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

导航栏未显示

来自分类Dev

导航栏未显示

来自分类Dev

导航栏未显示

来自分类Dev

导航栏未内联显示

来自分类Dev

导航栏未显示iOS Swift

来自分类Dev

笔尖视图未显示菜单或导航栏

来自分类Dev

UIButton图像未显示在导航栏中

来自分类Dev

SwiftUI TabView + NavigationView导航栏未显示

来自分类Dev

导航栏未显示在移动设备上

来自分类Dev

导航栏下拉列表未以角度显示

来自分类Dev

Bootstrap可折叠的导航栏未显示

来自分类Dev

图像未显示在悬停的导航栏中

来自分类Dev

片段未显示在选定的导航栏上?

来自分类Dev

导航栏未显示在 childViewController 中

来自分类Dev

合理的导航栏并使用Bootstrap显示内联代码块

来自分类Dev

合理的导航栏并使用Bootstrap显示内联代码块

来自分类Dev

Bootstrap 导航栏未显示折叠 div 和导航栏导航列表

来自分类Dev

导航栏列表项未显示,导航栏未粘贴在顶部

来自分类Dev

导航抽屉图标未显示为彩色

来自分类Dev

CSS导航未显示为Javascript

来自分类Dev

CSS导航未显示为Javascript

来自分类Dev

导航栏中未显示的条形按钮项目

来自分类Dev

导航栏未显示在Xcode 6的情节提要中

来自分类Dev

iPhone导航栏未显示设备上的所有按钮

来自分类Dev

导航栏未与MMDrawerController一起显示

来自分类Dev

导航工具栏未显示在窗口中

来自分类Dev

导航栏未显示在永久链接Jekyll网站上

来自分类Dev

Bootstrap 4搜索导航栏未显示在移动设备上

来自分类Dev

iOS工具栏未显示导航控制器