Bootstrap - 将 1 项置于左侧，同时保留另一项的中心位置

Question

我想不出一种方法可以让徽标位于导航栏的左侧，但可以使项目完美居中。我尝试对项目使用 margin auto，但由于徽标占据了 space.

，它们从中心移得更远了

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <div class="collapse navbar-collapse justify-content-center d-flex">
    <a class="navbar-brand">WIDE-LOGO-TEXT</a>

    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Contact Us</a>
      </li>
    </ul>

  </div>
</nav>

<!-- Second NavBar: --> 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <div class="collapse navbar-collapse d-flex">
    <a class="navbar-brand">WIDE-LOGO-TEXT</a>

    <ul class="navbar-nav" style="margin: 0 auto;">
      <li class="nav-item">
        <a class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Contact Us</a>
      </li>
    </ul>

  </div>
</nav>

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

从上面的预览 link 中可以看出，第二个导航栏项目与第一个导航栏项目的位置完全相同。问题是我希望这些完全居中，就好像徽标从未存在过一样。因此，我需要将导航项目向左移动以完全居中并且不受徽标影响。

我该怎么做？希望这是有道理的！

编辑：图像更清楚地说明问题：

Answer 1

有 2 种方法可以解决您的问题。

1) 徽标 class 适用 css position: absolute 和 parent class 适用 css position: relative;

2) 菜单 Class navbar-nav 应用 css transform: translateX(-80px); 你可以让导航中心对齐。不负众望。

Answer 2

使用绝对定位：

.navbar-brand {
    position: absolute;
    left: 16px;
}

Answer 3

这种css的预定义库请使用Bootstrap4。复制粘贴您找到结果的以下代码

enter image description here

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<html>
<head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
    <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="navbar-nav justify-content-center d-flex flex-fill">
             <li class="nav-item">
                <a class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Contact Us</a>
            </li>
        </ul>
    </div>
    <div class="d-flex flex-fill"><!--spacer--> </div>
</nav>


<div class="container-fluid">
    <h5 class="text-center">--center--</h5>
</div>

</body>
</html>

祝你好运:)

Bootstrap - 将 1 项置于左侧，同时保留另一项的中心位置

Bootstrap - Position 1 item to the left while preserving another item's center position

html

css

positioning