Bootstrap将导航栏项目向右浮动[重复]
Posted
技术标签:
【中文标题】Bootstrap将导航栏项目向右浮动[重复]【英文标题】：Bootstrap float navbar items to the right [duplicate] 【发布时间】：2018-07-19 19:15:37 【问题描述】：我试图将导航栏项目浮动到右侧而不是左侧
这是我使用的 html floats float-right 类，我认为 pull-right 已被弃用，因此任何可以提供帮助的人都会受到赞赏
<header class="container-fluid" id="nav">
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
【问题讨论】：
什么版本的 Bootstrap？ 我正在使用 bootstrap 4 【参考方案1】：在<ul class="navbar-nav ">中添加类“navbar-right”
【讨论】：
"navbar-right" 类在 Bootstrap4 中不存在【参考方案2】：在右侧为您想要的导航栏项目创建另一个<ul class="navbar-nav ml-auto">。
ml-auto 会将您的 navbar-nav 拉到右侧，mr-auto 会将其拉到左侧。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<style>
/* *** preview fix, please ignore */
.navbar-nav
flex-direction: row;
.nav-link
padding-right: .5rem !important;
padding-left: .5rem !important;
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Left Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Left Link 2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="navbar-item">
<a class="nav-link">Right Link 2</a>
</li>
</ul>
</nav>
</body>【讨论】：
完美，谢谢！ 这很棒。我想知道在哪里可以找到对所有这些 css 类的引用？mr-auto 和 ml-auto?以上是关于Bootstrap将导航栏项目向右浮动[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4将两个导航栏菜单按钮对齐到右侧[重复]