如何将导航栏项目与居中图像的左侧和右侧对齐？

Question

我正在 Blazor 中使用 Bootstrap 5.1 版开发一个网站。所以我在那个导航栏中设置了一个图像。现在我想在中心图像之前和之后对齐导航栏的其他项目。我尝试使用 Bootstrap 5.0 ms-auto 和 me-auto 到一个 div 并将导航项目放入其中，但它只将项目与导航栏的右角或左角对齐。

这是网站的代码：

@page "/"

<style>
    .navbar {
        position: relative;
        padding-top: 0;
        opacity: 80%
    }

    .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        
    }

    .img-responsive {
        height: auto;
        width: auto;
        max-height: 156px;
        max-width: 250px;
        top: 109px;
    }

    .circle
    {
    width: 249px;
    height: 285px;
    border-radius:250px;
    font-size:50px;
    line-height:500px;
    text-align:center;
    background:#000
    }
    body {
        background: url(assets/hack2.jpg) no-repeat center center fixed;
        background-size: cover;
    }
</style>

<div class=bodyContainer>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
            <div class="circle bg-light navbar-brand">
                <a href="#" class="navbar-brand">
                    <img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
                </a>
            </div>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Über uns</a>
                <a href="#" class="nav-item nav-link">Aktuelles</a>
                <a href="#" class="nav-item nav-link">Genossenschaft</a>
                <a href="#" class="nav-item nav-link">Nochagfrogt</a>
                <a href="#" class="nav-item nav-link">Kontakt</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>
</div>

如果有帮助（因为我为 body 创建了一个容器类）：

.bodyContainer {
    height: calc(100vh - 60px);
}

Answer 1

我将您的.navbar-nav a 字体颜色设为黑色，以便我看得更清楚，并在您的navbar-nav 类中添加了white-space: nowrap;，这样在调整大小时您的文字不会中断。我不确定我是否正确理解了你想要的最终结果，但我想我明白了它的要点。

为了便于将来自定义，我建议将每一面分成两个单独的 div，如下所示。 .left 包含左侧导航组件，.right 包含右侧组件。我将flex-display 放在您划分组件的两个新div 上，并使用gap 将它们隔开。然后我将它们嵌套在父级 nav element 中，出于演示目的，我将其称为 same-line。

首先，添加一个flex-display，然后您可以在您的父级nav 上添加justify-content: space-around;，这样可以让left 和right 的两侧间隔均匀强>双方恭敬。如果你的 logo 确实是 .circle 类的大小，我添加了一个示例 media-query，所以导航组件的 font-size 变得更小并且不会与 logo 重叠。

.navbar {
        position: relative;
        padding-top: 0;
        opacity: 80%;
    }

    .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        
    }

    .img-responsive {
        height: auto;
        width: auto;
        max-height: 156px;
        max-width: 250px;
        top: 109px;
    }

    .circle {
    width: 249px;
    height: 285px;
    border-radius:250px;
    font-size:50px;
    line-height:500px;
    text-align:center;
    background: black;
    }
    

.navbar-nav a {
  color: black;
  white-space: nowrap;
}

/* additions */
 .left {
   display: flex;
   gap: 20px;
 }
 
  .right {
   display: flex;
   gap: 20px;
 }
 
 
 nav.same-line {
   display: flex;
   justify-content: space-between;
 }
 
 @media only screen and (max-width: 800px) {
  .same-line {
    font-size: smaller;
  }
  
  .left, .right {
    display: flex;
    gap: 5px;
  }
}

/* additions END */

    body {
        background: url(assets/hack2.jpg) no-repeat center center fixed;
        background-size: cover;
    }

<div class="bodyContainer">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
            <div class="circle bg-light navbar-brand">
                <a href="#" class="navbar-brand">
                    <img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
                </a>
            </div>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
        <nav class="same-line"> <!-- puts both .left & .right one same line -->
            <div class="navbar-nav left">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Über uns</a>
                <a href="#" class="nav-item nav-link">Aktuelles</a>
            </div>
            <!-- left contains leftside nav components, right = opposite -->
            <div class="navbar-nav right">
                <a href="#" class="nav-item nav-link">Genossenschaft</a>
                <a href="#" class="nav-item nav-link">Nochagfrogt</a>
                <a href="#" class="nav-item nav-link">Kontakt</a>
            </div>          
        </nav>    

            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>
</div>

在测试 sn-p 时单击 full-page，然后调整浏览器大小以在 font-size 重叠之前观察它的变化。在调整大小时，我也会以同样的 media-query 为目标来更改您的徽标大小。