nav navbar-nav navbar-right 不会向右对齐，我正在使用 Bootstrap 3
Posted
技术标签:
【中文标题】nav navbar-nav navbar-right 不会向右对齐，我正在使用 Bootstrap 3【英文标题】：nav navbar-nav navbar-right wont align to the right, im using Bootstrap 3 【发布时间】：2017-11-26 02:43:17 【问题描述】：我正在创建由左侧对齐的徽标和右侧的菜单组成的导航栏，这是我的代码（html 和 css）：如何将 3 个链接对齐到右侧？我知道类：nav navbar-nav navbar-right 应该这样做，但它不会，谢谢！
h1
text-align: center;
.img-thumbnail
border: 0 none;
.navbar-custom
color: #FFFFFF;
background-color: transparent;
border-color: transparent;
.navbar-toggle
background-color: #000000;
.collapse .navbar-collapse
float: right;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title> Randomoooooooood</title>
</head>
<body>
<header class="navbar navbar-inverse navbar-custom">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="header-left clearfix">
<div class="logo smooth-scroll">
<a href="#banner"> <img id="logo" src="img/randomood_log.png" class="col-xs-4 col-sm-4 col-md-4 col-lg-2∫ img-thumbnail" ></a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
【参考方案1】：.navbar-collapse 是.col-md-4 的兄弟，后者强制您的标头仅使用总可用空间的 1/3。
【讨论】：
以上是关于nav navbar-nav navbar-right 不会向右对齐，我正在使用 Bootstrap 3的主要内容，如果未能解决你的问题，请参考以下文章