时间戳

首页 > 解决方案 > 如何从折叠的导航栏中排除徽标？[引导程序/HTML]

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

问题描述

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

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

谢谢你。

标签： htmlcssbootstrap-5

解决方案

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

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

代码笔示例

这是你要找的吗？

[更新]

我没有看到您使用的是 Bootstrap 5。我添加了一个包装 the和 the的.text-end容器，并为样式添加了一些其他实用程序类。button.nav-togger.navbar-collapse

<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 示例

推荐阅读