文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么菜单不移到中间？

问为什么菜单不移到中间？
EN

Stack Overflow用户

提问于 2021-07-29 19:17:48

回答 1查看 30关注 0票数 2

这是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

这是CSS

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

我甚至尝试用普通的css来实现它，在Bootstrap文档中，它说要添加类的正确性-内容中心，我也尝试添加nav类，但是仍然不起作用。知道怎么修吗？忘了也提到，我确实希望标志留在它的位置在左边。

bootstrap-5

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-29 19:23:01

试着做这样的事：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div style="justify-content: center;" class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

CSS：

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

只需在菜单style="text-align: center;"中添加<a>，结果如下所示：

最后看起来是：

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68581769

复制

相似问题

问为什么菜单不移到中间？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么菜单不移到中间？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么菜单不移到中间？
EN