个人中心
gpt4 book ai didi

html - Bootstrap 4 导航栏错误

转载 作者：行者123 更新时间：2023-11-28 00:28:43 26 4
gpt4 key购买 nike

因此，正如您在代码片段中看到的那样，下拉菜单的背景会跳起来。但是，当我删除 .navlinks-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; 
}

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

正如下面所建议的，我尝试了文本对齐，现在它在小屏幕上工作正常，但在大屏幕上，导航项向左对齐。 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre>
</div>
</div>

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

最佳答案

“position:absolute”是必要的吗？

因为我认为您可以通过简单地使用“text-align”或“margin”属性来实现您的目标。

例如:

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

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

关于html - Bootstrap 4 导航栏错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54520608/

26 4 0
文章推荐： php - 一些关于 RSS 提要的帮助
文章推荐： javascript - jQuery:从 DOM 元素变量中链接选择器
文章推荐： javascript - 带有 Angular 指令的 HTML 在附加时不起作用
文章推荐： html - 100% 高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com