![导航选项卡将项目右对齐]( "导航选项卡将项目右对齐")
本文介绍了Bootstrap 4 alpha 6 导航选项卡将项目右对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个标签菜单，在菜单的最右侧具有 nav-item dropdown.
Bootstrap 4 alpha 5，带有 float-xs-right 其工作:http://codeply.com/go/FCFPpRqhZd
Bootstrap 4 alpha 6，我改为 float-right 但它不起作用:http://codeply.com/go/5mddDUv1M6
有想法吗?
解决方案
由于 alpha 6 现在是 flexbox，float 在这种情况下将不再起作用.
使用 ml-auto 实用程序类代替 margin-left:auto
<ul class="nav nav-tabs"><li class="nav-item"><a href="#" class="nav-link active">链接 1</a><li class="nav-item"><a href="#" class="nav-link">链接 2</a><li class="nav-item"><a href="#" class="nav-link">链接 3</a><li class="nav-item"><a href="#" class="nav-link">链接 4</a><li class="nav-item dropdown ml-auto"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">账户</a><div class="下拉菜单"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">分隔链接</a>
http://www.codeply.com/go/hhV1aM49zz
I am trying to create a tab menu that has nav-item dropdown to the far right of the menu.
Bootstrap 4 alpha 5, with float-xs-right its working: http://codeply.com/go/FCFPpRqhZd
Bootstrap 4 alpha 6, i changed to float-right but it isnt working: http://codeply.com/go/5mddDUv1M6
Have idea?
解决方案
Since alpha 6 is now flexbox, float will no longer work in this case.
Use the ml-auto utility class instead for margin-left:auto
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 4</a>
</li>
<li class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
http://www.codeply.com/go/hhV1aM49zz
这篇关于Bootstrap 4 alpha 6 导航选项卡将项目右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！