在引导程序4上将链接对齐到导航栏上4

问题描述：

如何在引导程序-4中将链接对齐到导航栏的右侧。下面是我的代码：在引导程序4上将链接对齐到导航栏上4

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <div class="mr-auto"> 
 
    <div class="float-right"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item mr-3"> 
 
      <a href="#"><i class="fa fa-commenting-o text-light fa-lg"></i></a> 
 
     </li> 
 
     <li class="nav-item mr-3"> 
 
      <div class="dropdown"> 
 
      <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
       <i class="fa fa-ellipsis-v text-light fa-lg"></i> 
 
      </a> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

我要评论图标和垂直省略号图标转移在导航栏

也许你解释一下你试过了吗？ – wwkudu

哈哈！你想成为SARCASTIC？我试过的是正确的问题，并用'Run Code Snippet'蓝色按钮更好地解释。 –

哈哈，根本不讽刺。只是想帮助你更快得到答案。只是当您必须从头开始调试代码时，需要更长的时间才能提供帮助。你已经提供了所有的代码，但是没有真正给出任何关于这一点的故事/你的想法。 – wwkudu

答

Does this answer your question?

的右侧添加mr-auto您想要的类对齐并从您的导航类中删除navbar-expand-lg。
Codepen Example

如果你看到了，我已经应用了它，但它并没有对齐到正确的位置。 –

'navbar-expand-lg'正在阻止您的物品向右移动请参阅示例：[codepen]（https://codepen.io/floresfxf/pen/qXyQjX） –

在引导程序4上将链接对齐到导航栏上4

相关推荐