为啥导航栏列表不在右侧？

Posted 2023-03-24

【中文标题】为啥导航栏列表不在右侧？

【英文标题】：Why Nav bar list not on right side?为什么导航栏列表不在右侧？

【发布时间】：2020-10-08 16:18:27

【问题描述】：

当我删除导航栏切换按钮和 div 导航栏折叠时我遇到了一个问题，我的整个导航栏元素都在我希望它们的正确方式上，但是 div 导航栏折叠是它们使导航栏响应看起来导航栏很好，我的整个导航列表都在我的品牌标志旁边。 请帮助我如何解决？我正在使用引导程序。

html/引导程序：

    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-toggle="affix" >
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand"><img src="images/logo.png" ></a>
            </div>
    
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse " id="navbarNav"> 
    
            <ul class="navbar navbar-nav ">
                <li class="nav-item p-3"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Members</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Membership</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">About Us</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Contact Us</a></li>
                
            </ul>
             </div> 
        </div>
    </nav> 

CSS：

* 
    padding: 0; 
    margin: 0; 
 

nav  
    letter-spacing: 4px; 
    font-family: 'Metal Mania', cursive; 
 

.navbar 
    -webkit-transition:padding 0.2s ease; 
    -moz-transition:padding 0.2s ease; 
    -o-transition:padding 0.2s ease; 
    transition:padding 0.2s ease;  

.affix  
    padding-top: 0.2em !important; 
    padding-bottom: 0.2em !important; 
    -webkit-transition:padding 0.2s linear; 
    -moz-transition:padding 0.2s linear; 
    -o-transition:padding 0.2s linear; 
    transition:padding 0.2s linear; 
 

【问题讨论】：

发布您的 CSS，我们会处理它：D

这只是我正在使用的 css，其他一切都是引导

【参考方案1】：

从 div 中移除 .collapse 类

<div class="navbar-collapse " id="navbarNav">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-toggle="affix" >
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand"><img src="images/logo.png" ></a>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-collapse " id="navbarNav"> 

        <ul class="navbar navbar-nav ">
            <li class="nav-item p-3"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item p-3"><a class="nav-link" href="#">Members</a></li>
            <li class="nav-item p-3"><a class="nav-link" href="#">Membership</a></li>
            <li class="nav-item p-3"><a class="nav-link" href="#">About Us</a></li>
            <li class="nav-item p-3"><a class="nav-link" href="#">Contact Us</a></li>

        </ul>
         </div> 
    </div>
</nav> 

【讨论】：

它不起作用，我正在尝试使整个导航列表向右移动，而不是带有网站徽标

【参考方案2】：

问题已解决！ 通过将 ml-auto 提供给 ul 解决了我的问题。 感谢所有尝试回答的人

【讨论】：

您能否通过编辑此答案提供工作代码？它可能会帮助将来遇到同样问题的人。