【问题标题】:Bootstrap 5 navbar - Can't get nav items to the right side, when brand is on the left side [duplicate]Bootstrap 5导航栏-当品牌在左侧时,无法将导航项目移到右侧[重复]
【发布时间】:2021-08-23 08:27:21
【问题描述】:

我在将项目移到正确位置时遇到问题。我的品牌在左侧,无论我尝试什么。我无法将项目放到导航栏的右侧。它们一直紧贴在左侧。

这是我的代码:

 <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="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="NavCollapse">
      <a class="navbar-brand ms-10" href="#">
      <img src="logo.png" class="img-fluid">
      </a>
    
    <ul class="navbar-nav">
       <li class="nav-item active">
       <a class="nav-link menutext active" href="index.php">Home</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="articles.php">Articles</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="games.php">Games</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Gallery</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Projects</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="credits.php">Credits</a>
       </li>
    </ul>
    
      </div>
      </div>
    </nav>

我不知道,我在那里做错了什么。是我搞砸了还是我错过了代码中的某些内容?

【问题讨论】:

标签: html css navbar bootstrap-5


【解决方案1】:

Bootstrap 包含几个可以在此处使用的 flexbox 实用程序类。

由于.navbar-collapse 类设置为display: flex 并且该元素内只有2 个孩子,我们可以添加.justify-content-between 类来强制2 个孩子坐在相反的两端。

<div class="collapse navbar-collapse justify-content-between" id="NavCollapse">

或者,如果.navbar-collapse 元素有两个以上的子元素,您可以将.ml-auto 实用程序放在ul 元素上以强制它位于右侧。

<ul class="navbar-nav ml-auto">

文档:Bootstrap flex utilities

【讨论】:

    【解决方案2】:

    由于您希望将整个导航对齐到导航栏的右侧,您可以简单地在导航链接部分之前添加一个空白 div,其边距为 auto,这会将导航推到右侧一边。

    &lt;div class="me-auto"&gt;&lt;/div&gt;

    在您的原始导航栏代码中,此实现如下所示:

    <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="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="NavCollapse">
          <a class="navbar-brand ms-10" href="#">
          <img src="logo.png" class="img-fluid">
          </a>
    
        <div class="me-auto"></div>
        
        <ul class="navbar-nav">
           <li class="nav-item active">
           <a class="nav-link menutext active" href="index.php">Home</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext" href="articles.php">Articles</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext" href="games.php">Games</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext disabled" href="#">Gallery</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext disabled" href="#">Projects</a>
           </li>
           <li class="nav-item">
           <a class="nav-link menutext" href="credits.php">Credits</a>
           </li>
        </ul>
        
          </div>
          </div>
        </nav>
    

    如需了解更多信息并了解详细实现,请查看导航栏上的 Bootstrap 文档:

    https://getbootstrap.com/docs/5.0/components/navbar/

    【讨论】:

    • 你的解决方案很有魅力,如果我能做出 2 个被接受的答案,那么你的将是第二个。感谢您提供简单快速的修复。
    猜你喜欢
    • 2020-12-13
    • 1970-01-01
    • 1970-01-01
    • 2016-10-22
    • 2015-09-27
    • 1970-01-01
    • 1970-01-01
    • 2019-03-25
    • 1970-01-01
    相关资源
    最近更新 更多