引导4导航栏的bug

问题描述 投票：0回答：1

所以你可以在代码片段看到，下拉菜单的背景跳跃起来。然而，当我删除.navlinks中心级它工作得很好。

我是新的网络开发和会很感激一些帮助，因为我不能把它固定在不改变navlinks的位置。

.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>

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

html css
1个回答
0
投票

是“位置：绝对”有必要吗？

因为我认为你可以通过简单地使用“文字对齐”或“保证金”性质实现自己的目标。

例如 ：

       .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;
            }
        }

但我还是不知道这是最好的解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.