Bootstrap 4导航栏错误

时间：2019-02-04 16:42:26

标签： html css

因此，如您在代码段中所见，下拉菜单的背景会跳起来。但是，当我删除.navlinks-center类时，它可以正常工作。

我是Web开发的新手，非常感谢您的帮助，因为如果不更改导航链接的位置就无法修复它。

.navbar-custom {
    background-color: rgba(255,255,255,0.95) !important;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.45s ease;
    z-index: 1030; 
}

.navlinks-center {
position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body style=" background-color: gray;"
  >
  
 
    <nav class="navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
      <a class="navbar-brand" href="#"><img src="Brand1.png" style="height: 3.6rem;"></a>
      <a class="navbar-brand" href="#"><img src="Brand2.png" style="height: 3rem;"></a>
      <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="collapsingNavbar">
        <ul class="navbar-nav mr-auto navlinks-center">
          <li class="nav-item active">
            <a class="nav-link hvr-grow" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link hvr-grow" href="about.html">Über uns</a>
          </li>
            <li class="nav-item">
            <a class="nav-link hvr-grow" href="events.html">Events</a>
          </li>
            <li class="nav-item">
            <a class="nav-link hvr-grow" href="forum.html">Forum</a>
          </li>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

如下面的建议，我改用文本对齐，现在它在小屏幕上可以正常工作，但是在大屏幕上，导航项向左对齐。 





<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body style=" background-color: gray;"
  >
  
 
    <nav class="navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
      <a class="navbar-brand" href="#"><img src="Brand1.png" style="height: 3.6rem; width: 108px;"></a>
      <a class="navbar-brand" href="#"><img src="Brand2.png" style="height: 3rem; width: 261px;"></a>
      <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="collapsingNavbar">
        <ul class="navbar-nav mr-auto navlinks-center">
          <li class="nav-item active">
            <a class="nav-link hvr-grow" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link hvr-grow" href="about.html">Über uns</a>
          </li>
            <li class="nav-item">
            <a class="nav-link hvr-grow" href="events.html">Events</a>
          </li>
            <li class="nav-item">
            <a class="nav-link hvr-grow" href="forum.html">Forum</a>
          </li>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

现在可以在小屏幕上正常工作，但在大屏幕上，导航项在品牌旁边的左侧对齐

1 个答案:

答案 0 :(得分：0)

“ position：absolute”是否必要？

因为我认为您只需使用“文本对齐”或“边距”属性即可实现目标。

例如：

       .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030; 
        }

        .navbar-collapse{
            text-align: center;
        }

或

       .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030; 
        }

        .nav-item {
            margin: auto;
        }

[编辑]

要使菜单居中且图片在左侧（如您的示例），您可能需要使用媒体查询。如果您的品牌图片具有恒定的宽度，则可以使用以下CSS：

    .navbar-custom {
            background-color: rgba(255,255,255,0.95) !important;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 0.45s ease;
            z-index: 1030;
        }

        .nav-item{
            margin: auto;
        }
        .navbar-nav{
            display: flex;
            margin: auto;
        }

        @media screen and (min-width:1200px){
            .navbar-nav{
                padding-right: 6.6rem;
            }
        }

但是我仍然不确定这是最佳解决方案。

相关问题
最新问题