左,右 &将引导程序导航栏中的内容居中 [英] left, right & centering content inside a bootstrap navbar
问题描述
试图让引导导航栏在响应式网站的左侧、中间和右侧都有链接.
这甚至可能吗?也许导航栏合理将内容集中在导航栏上是错误的?
</nav>
您可以使用 navbar-left/navar-right
类来定位您的链接,并使用自定义类来定位 navbar-brand
根据您需要的尺寸.请参阅工作示例代码段.
.navbar-custom .navbar-brand.navbar-brand-centric {位置:绝对;左:50%;显示:块;宽度:200px;文本对齐:居中;顶部:0;}.navbar.navbar-custom >.container .navbar-brand.navbar-brand 为中心,.navbar.navbar-custom >.container-fluid .navbar-brand.navbar-brand-center {左边距:-100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div class="navbar navbar-default navbar-custom" role="navigation"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>按钮>
<a class="navbar-brand navbar-brand-centric" href="#/">品牌</a><div class="collapse navbar-collapse" id="js-navbar-collapse"><ul class="nav navbar-nav navbar-left"><li><a href="#/">链接</a><li><a href="#">链接</a><ul class="nav navbar-nav navbar-right"><li><a href="#">链接</a><li><a href="#">链接</a>
<div class="容器"><div class="well">是的</div>