Question

我正在使用引导程序类，我需要徽标在左侧，但导航项目在右侧。也要响应。

       <!-- Logo -->
       <a class="navbar-brand" href="#">
           <img class="img-fluid" src="images/header-logo.png" alt="logo">
       </a>

       <!-- Toggler/collapsibe Button -->
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
           <span class="navbar-toggler-icon"></span>
       </button>

       <!-- Nav items -->
       <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
           <ul class="navbar-nav">
               <li class="nav-item">
                   <a class="nav-link" href="#">Home</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Products</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Services</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Contact</a>
               </li>
           </ul>
       </div>
   </nav>

Answer 1

您可以使用向右浮动键将导航栏移到右侧

#collapsibleNavbar{
 float: right;
 margin: 0 10px 0 0;
}

Answer 2

您可以尝试以下方法：

// CSS code
nav #collapsibleNavbar{
    width: n%; // n = o que achar melhor
    margin: n n;
    display: block;
}
nav #collapsibleNavbar .navbar-nav{
    display: block;
    width: auto; // or what You think is better for your project
    margin: n n;
    float: right;
}

我认为您可以尝试将LOGO和Toggler / collapsibe按钮封装在div中，并将div设置为向左浮动。也许您需要添加一些“！重要”。

Answer 3

您可以将ml-auto添加到您的ul类中，这为您的ul的{{1}}中的margin-left提供了一个条件。看起来像这样：

auto

如何在右侧移动导航栏项目

3 个答案: