Question

我在一个网站上工作，但无法设置导航栏。我想在导航栏展开时将所有导航链接居中，但在导航栏处于折叠形式时不希望在导航栏中居中。当它处于折叠状态时，我希望它们垂直堆叠并与页面左侧对齐。我可以成功地使链接居中或在合拢时保持对齐，但不能同时对齐。

这是我的带有导航栏代码的HTML。在类abs-center-x的navbar ul元素中，这是我之前尝试过的方法，如果有帮助，您会在CSS中看到它的注释。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Website</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark justify-content-center sticky-top">
      <a href="./index.html" class="navbar-brand">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse" id="mainNav">
        <ul class="navbar-nav abs-center-x" id="navElements">
          <li class="nav-item active">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Prelicensing</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Schedule & Cost</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Defensive Driving</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Road Test Prep.</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Contact</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">FAQ</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Reviews</a>
            </li>
        </ul>
      </div>
    </nav>
  </body>
</html>

这是我的CSS，其中的abs-center-x类已被注释掉，并显示了当前代码。

/*
.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
*/


@media (max-width: 768px) {
  .navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  .navbar-nav > li {
    display: inline-block;
    float:none;
  }
}

不幸的是，我已经在Stack Overflow上尝试了大多数资源，但似乎找不到解决方法。

谢谢您的帮助！

-Trifex

Answer 1

基本上有already been answered。使用实用程序类使导航栏折叠全角（w-100），然后使justify-content-center使链接居中...

https://www.codeply.com/go/wWZKVllCei

<nav class="navbar navbar-dark navbar-expand-lg bg-dark sticky-top">
    <a href="./index.html" class="navbar-brand">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100" id="mainNav">
        <ul class="navbar-nav w-100 justify-content-center" id="navElements">
            <li class="nav-item active">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Prelicensing</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Schedule &amp; Cost</a>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Defensive Driving</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Road Test Prep.</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Contact</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">FAQ</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Reviews</a>
            </li>
        </ul>
    </div>
</nav>

根据品牌的宽度，您可能还需要为Navbar内容（品牌，链接等）设置宽度，以确保链接完美居中。否则，相邻的项目会影响“居中”链接的位置。

https://www.codeply.com/go/jk6KogFo8H（完美的中心）

Bootstrap 4中心导航栏元素，不以移动折叠为中心

1 个答案: