Question

当我的导航栏折叠时，将显示汉堡菜单。每当我单击它时，下面的所有内容都会被下推，并留下混乱的主页。

我的导航栏：

<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Film</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Über uns</a>
      </li>
    </ul>
  </div>
</nav>
</section>

我的CSS：

body{
    text-align: justify !important;
}

#nav-bar{
    position: fixed;
  left: 0px;
  top: 0px;
    width: 100px;

}
.navbar-brand img{
    height: 40px;
    padding-left: 30;
}

.navbar-nav li{
    padding: 0 10px;
}

.navbar-nav li a{
    float: right;
    text-align: left;
}

.nav-bar ul li a:hover{
    color: #000000!important;
}

.navbar{
    background: #fff;
}

.navbar-toggler{
    border: none!important;
}

.nav-link{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

我尝试使用Z-Index方法，但到目前为止还没有运气。也许我做错了什么？

https://jsfiddle.net/Lqzs1jdw/8/

谢谢。

Answer 1

您刚刚输入错误，请将#更改为.即可解决问题

示例：

.nav-bar{
    position: fixed;
    width: 100%;
}

https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/

Navbar Burger（Dropdown）是否会将内容下推？

1 个答案: