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

Question

我正在使用 Bootstrap 5.1 版的 Blazor 开发一个网站。所以我在那个导航栏中设置了一个图像。现在我想在中心图像前后对齐导航栏的其他项目。我尝试使用 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>

如果有帮助（因为我为正文创建了一个容器 class）：

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

Answer 1

我把你的 .navbar-nav a font-color 变黑了，只是为了让我看得更清楚，并在你的 navbar-nav class 上添加了 white-space: nowrap; 这样你的话就不会调整大小时中断。我不确定我是否正确理解了您想要的最终结果，但我想我明白了要点。

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

首先，添加一个 flex-display，然后您可以在 parent nav 上添加 justify-content: space-around;，这样可以让两侧 space 均匀分布左和右两边恭敬。如果您的徽标确实是 .circle class 的大小，我添加了一个示例 media-query，因此导航组件的 font-size 变得更小并且不会与徽标重叠。

.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>

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

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

How can I align my navbar items to the left and right side of the centered image?

html

css

bootstrap-4

blazor

bootstrap-5