Question

我正在努力使当用户在桌面上时，网站的徽标将显示在导航栏的中间。但是，我也想让当用户在移动设备上时，徽标将位置更改为位于屏幕的右上角，而激活导航栏的按钮位于左侧。目前，我将它放在中心，它只是停留在那里，这导致它也位于折叠的导航栏中。我怎样才能使它从那里被排除在外？

        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                    <div class="navbar-nav justify-content-center">
                        <a class="nav-link" href="index.html">Home</a>
                        <a class="nav-link" href="#">About</a>
                        <img src="logo.png" alt="" width="100" height="45">
                        <a class="nav-link" href="#">Portfolio</a>
                        <a class="nav-link" href="#">Contact</a>
                    </div>
                </div>
            </div>
        </nav>

谢谢。

Answer 1

如果我理解正确，这就是我的处理方式：

将 d-none d-lg-block 类添加到中间徽标 img 标签，使其仅显示桌面。

然后添加一个重复的 img 作为您的 .container-fluid 中的最后一项，并向其添加 d-block d-lg-none 类，以便它可以在移动设备上而不是桌面上显示。

然后将 flex-nowrap 添加到您的 nav 标签中，这样徽标将与切换按钮一起显示。

最后，将 align-self-start 类添加到重复项/移动设备 img 中，以便在导航打开时与切换按钮保持一致。

它应该看起来像这样：

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
      <div class="navbar-nav justify-content-center">
        <a class="nav-link" href="index.html">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
      </div>  
    </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

Codepen example

这是您要找的吗？

[更新]

我没有看到您在使用 Bootstrap 5。我添加了一个 .text-end 容器，用于包装 button.nav-togger 和 .navbar-collapse，并添加了一些其他实用程序类以用于样式。< /p>

<nav class="navbar navbar-expand-lg navbar-dark flex-nowrap flex-row-reverse">
  <div class="container-fluid navbar justify-content-end justify-content-lg-center">
   <div class="text-end">
      <button class="navbar-toggler mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="navbar-nav container-fluid justify-content-center p-0">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">About</a>
        <img class="d-none d-lg-block" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
        <a class="nav-link" href="#">Portfolio</a>
        <a class="nav-link" href="#">Contact</a>
        
      </div>  
    </div>
   </div>
  </div>
  <img class="d-block d-lg-none align-self-start" src="https://mk0leanfrontierqpi7o.kinstacdn.com/wp-content/uploads/2018/12/logo-placeholder-png.png" alt="" width="100" height="45">
</nav>

使用 Bootstrap 5：Codepen example

Answer 2

这是另一种不需要复制徽标的方法。要从折叠导航栏中排除徽标（或任何其他内容），必须将其从 navbar-collapse div...

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
            <ul class="navbar-nav ms-auto text-center">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
        <div class="mx-lg-auto my-2 order-0 order-md-1 position-relative">
            <a class="mx-auto" href="#"><img src="//via.placeholder.com/50/ccff00" class="rounded-circle"></a>
        </div>
        <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
            <ul class="navbar-nav me-auto text-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

https://codeply.com/p/BL17fggy1m

如何从折叠的导航栏中排除徽标？ [引导程序/ HTML]

2 个答案: