问题背景:
我有一个标准的 Bootstrap 可折叠 NavBar
那是 pulled-right
.
问题:
这是 NavBar
在非移动设备上:
这是向右拉的,以实现所需的右对齐位置。
这是 NavBar
在移动设备上折叠:
**请注意,下拉列表中的元素是右对齐的,因为它向右拉是有道理的,但我希望它们在移动设备上居中,同时在非移动设备上保持它们右对齐
代码:
我认为设置 text-center
在 <ul>
上list 可以解决问题,但不能:
<div class="navbar">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="pull-right text-center">
********Set text-center but this dosen't work********
<ul class="nav navbar-nav text-center">
<li><a href="#" class="scroll-link" data-id="Info">Services</a></li>
<li><a href="#" class="scroll-link" data-id="Mission">Our Mission</a></li>
<li><a href="#" class="scroll-link" data-id="Gallery">Projects Gallery</a></li>
<li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
设置这些的任何帮助<ul>
列表元素居中但在非移动设备上保持菜单项向右拉会很棒。
最佳答案
您应该使用 navbar-right
而不是 pull-right
。
只需放置 navbar-right
到 unordered-list
,删除 pull-right
div,链接将在小型设备上居中。
工作 example .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
<nav class="navbar navbar-default navbarColour" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Images/DC.png" class="dc">
</div>
<div class="middleNavPadding">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="#" class="scroll-link" data-id="Info">Services</a>
</li>
<li><a href="#" class="scroll-link" data-id="Mission">Our Mission</a>
</li>
<li><a href="#" class="scroll-link" data-id="Gallery">Projects Gallery</a>
</li>
<li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
关于html - Bootstrap - 无法将导航栏向右拉的折叠元素居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31276360/