Question

首先，我是一个初学者。我正在尝试使用Bootstrap创建一个响应式导航栏，但它根本不响应。

导航栏不会折叠我的元素。
元素不在导航栏中居中对齐
我设置了一个容器流体，但我的元素并未扩散。
我希望当我单击汉堡菜单时仅显示我的导航链接。

我完全迷路了。`有人可以帮我... 谢谢

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <header>
    <div id="navbar" class="container-fluid">
      <div class="container-fluid nav-fill">
        <nav class="navbar navbar-expand-md navbar-light d-flex justify-content-center" role="navigation">
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse d-flex align-items-center justify-content-lg-between " id="navbarContent">

            <ul class="navbar-nav nav-fill w-100 d-flex align-items-center"> 
              <li class="nav-item">
                <ul class="navbar-nav nav-fill d-flex align-items-center">
                  <li class="nav-item">
                    <a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png"
                      alt="sr-logo.png"></a>
                  </li>
                  <li class="nav-item">
                    <a class="brand-logo-user navbar-brand" href="#"><img class="lvmh-logo" src="./img/lvmh-logo.jpg"
                      alt="lvmh-logo.jpg"></a>
                  </li>
                </ul>
              </li>
              <li class="nav-item w-50">
                <ul class="navlinks navbar-nav nav-fill w-100">
                  <li class="nav-item">
                    <a class="nav-link active" href="#">LINK1<span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK2</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK3</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">LINK4</a>
                  </li>
                </ul>
              </li>

              <li class="nav-item align-items-center ml-5">
                <ul class="navbar-nav nav-fill align-items-center">
                  <li>
                  <li class="nav-item">
                    <img src="img/profil.svg" class="profile d-inline">
                  </li>
                  <li>
                  <li class="nav-item">
                    <p class="username d-inline ml-3">Mr. Blah</p>
                  </li>
                </ul>
              </li>

              <li class="nav-item">
                <ul class="navbar-nav nav-fill d-flex justify-content-between w-75">
                  <li class="nav-item active">
                    <a class="language active d-inline">FR</a>
                  </li>
                  <li class="nav-item">
                    <a class=" language d-inline">EN<a>
                  </li>
                </ul>
              </li> 
          </div>
      </div>
      </nav>
    </div>
    </div>
  </header>

  <script src="scripts.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
</body>

</html>```




My CSS :

    ```body{
      font-family: 'Poppins', sans-serif;
    }

    nav{
      background-color: white;
      height: 97px;
      padding: 0;
      margin: 0;
    }

    .brands {
      display: inline;  
      align-items: center;
    }
    .navbar-light .navbar-nav .nav-link {
      color: black;
    }

    .navlinks{
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 0.5px;
      text-align: center;
      color: black
    }
    .navlinks li > a:after{
      content: '';
      display: block;
      height: 5px;
      background-color:#00e7b5;
      border-radius: 7%;
      transform: scaleX(0);
      transition: transform .3s;
    }
    .navlinks li > a:hover:after{
      transform: scaleX(1);
      transition: transform .3s;
    }
    .navlinks .active{
      color:#00e7b5 !important;
    }


    img{
      max-width: 150px;
      max-height: 20px;
    }


    .username{
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #5300b4;
    }

    .language{
      font-family: Poppins;
      font-size: 18px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 2px;
      color: black;
    }


    .navlinks a:hover{
      color: #00e7b5 !important;
      }
    nav ul{
        text-align: center;
      }```

Answer 1

首先删除BS v3的所有实例，然后仅添加BS v4的CDN，并确保在关闭body标签之前在标头和JS链接中添加CSS链接。您可以从here获取最新的CDN，请确保在添加引导js之前包括jquery和popper.js，因为BS4取决于这两个脚本，您可以在同一链接上找到这些脚本CDN，然后

您必须正确地调整内容，而不是当前的内容，阅读有关引导导航栏here的更多信息，然后进入查询中的指针

导航栏不会折叠我的元素。 在正确的位置使用了正确的CDN之后，它将开始崩溃。

元素不在导航栏中居中对齐 从上面的链接中了解如何使导航栏内容居中。

我设置了一个容器流体，但我的元素并未扩散。 它将起作用，同时请确保不要在container-fluid内使用container-fluid，因为它将在两侧都增加不必要的填充。

我希望当我单击汉堡菜单时仅显示我的导航链接。 要获得此结果，请将<a class="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png" alt="sr-logo.png"></a>移至类collapse的div之外。

请仔细检查代码，因为其中包含许多未在正确位置打开或关闭的标签，请尝试使导航栏从启动状态开始起作用。

祝您好运，希望对您有所帮助。

Answer 2

这是用于导航栏切换

body{
  font-family: 'Poppins', sans-serif;
}

nav{
  background-color: white;
  margin: 0;
}
.navbar-nav > li{
margin-left:100px;
margin-right:100px;
}

.brands {
  display: inline;  
  align-items: center;
}
.navbar-light .navbar-nav .nav-link {
  color: black;
}

.navlinks{
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.5px;
  text-align: center;
  color: black
}
.navlinks li > a:after{
  content: '';
  display: block;
  height: 5px;
  background-color:#00e7b5;
  border-radius: 7%;
  transform: scaleX(0);
  transition: transform .3s;
}
.navlinks li > a:hover:after{
  transform: scaleX(1);
  transition: transform .3s;
}
.navlinks .active{
  color:#00e7b5 !important;
}

img{
  max-width: 150px;
  max-height: 20px;
}

.username{
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #5300b4;
}

.language{
  font-family: Poppins;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 2px;
  color: black;
}

.navlinks a:hover{
  color: #00e7b5 !important;
}
nav ul{
    text-align: center;
}

    <body>
<br>
    <div class="container-fluid">
        
        <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle " 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="brand-logo navbar-brand" href="#"><img class="sr-logo" src="./img/sr-logo.png">Brand </a>
  
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navlinks">

          <li><a class="nav-link"  href="#">LINK1</a></li>
          <li><a href="#">LINK2</a></li>
          <li><a href="#">LINK3</a></li>
          <li><a href="#">LINK4</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right navlinks">
          <a class="brand-logo navbar-brand username" href="#"><img class="sr-logo" src="./img/1.jpg">Mr X</a>
        
        </ul>
      </div>
  </nav>
    </div>
    </div> 
</body>

头文件：我用过引导程序3.3.7

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap导航栏不会折叠并且没有响应

2 个答案: