<分区>
<分区>
<!-- Navbar start -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div class="navbar-collapse collapse" id="a-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
这是我的 HTML 代码，因为这将是导航栏 - 我想将我的品牌保留在左 Angular - 现在没问题链接即链接 1 到链接 5 对齐导航栏的中心链接 6和右侧的 Link 7 - 现在好了
帮助我将链接 1 到链接 5 对齐到导航栏的中间，这样在折叠时应该移除中心对齐方式并且所有折叠的链接都应该在左侧
第一篇文章!对不起英语不好
最佳答案
只需使用下面提到的 css 即可实现。
添加class=navbar-center到 <ul>包含需要居中对齐的链接
工作示例
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div class="navbar-collapse collapse" id="a-navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>
</div>
</nav>关于javascript - Bootstrap 导航栏居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42558081/
相关文章：
php - 联系表单 ajax PHP 调用在屏幕上打印回显而不是返回成功
java - 运行 docx4j createhtml.java 文件时出错
javascript - 如何从 Backbone Marionette 的复合 View 中获取 subview ？
javascript - 填充 JavaScript 键值对
javascript - 如何转换 iPad 上基于 Flash 的交互式动画
javascript 停止重复的 setTimeout 函数
javascript - 无法在 TypeScript 中导入 NPM 包(例如 Faker)