怎样使bootstrap导航栏始终显示成一行?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样使bootstrap导航栏始终显示成一行?相关的知识，希望对你有一定的参考价值。
操作步骤：
创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
实例演示：
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 默认的导航栏</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div></nav></body></html>
参考技术A该怎么去形容你最贴切
拿什么跟你作比较才算特别
对你的感觉 强烈
却又不太了解 只凭直觉
你像我在被子里的舒服
却又像风 琢磨不住
Bootstrap 页脚导航栏问题
【中文标题】Bootstrap 页脚导航栏问题【英文标题】：Bootstrap footer navigation bar problems 【发布时间】：2017-10-13 17:40:01 【问题描述】：由于某种原因，我的页脚导航栏在完整桌面模式下显示，一些菜单链接显示在与导航栏标题相同的行上，然后在经过导航栏标题时垂直居中...我只想要它们垂直显示在一行中并居中....
（当前显示） 导航栏标题链接 1 链接 2 链接 3 （我实际上希望它如何显示） 导航栏标题 链接 1 链接 2 链接 3<div class = "container-fixed">
<div class = "row" height = 100%>
<div class = "col-sm-2 col-sm-offset-1">
<!-- Footer About Dropdown -->
<nav class = "navbar navbar-default" id = "bottomabout">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3 class = "text-center">
About Us
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
OUR STORY
</a>
</li>
<li>
<a href = "">
BABY REGISTRY
</a>
</li>
<li>
<a href = "">
STORE LOCATOR
</a>
</li>
<li>
<a href = "">
TESTIMONIALS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<!-- Service Footer Dropdown -->
<nav class = "navbar navbar-default" id = "bottomservice">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Service
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
CONTACT US
</a>
</li>
<li>
<a href = "">
ORDER STATUS
</a>
</li>
<li>
<a href = "">
FAQ
</a>
</li>
<li>
<a href = "">
SHIPPING POLICY
</a>
</li>
<li>
<a href = "">
RETURN POLICY
</a>
</li>
<li>
<a href = "">
NEWSLETTER
</a>
</li>
<li>
<a href = "">
MY ACCOUNT
</a>
</li>
<li>
<a href = "">
LIVE CHAT
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Shop Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomshop">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Shop
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
BABY APPAREL
</a>
</li>
<li>
<a href = "">
BABY GIFTS
</a>
</li>
<li>
<a href = "">
CHRISTENING
</a>
</li>
<li>
<a href = "">
FURNITURE
</a>
</li>
<li>
<a href = "">
BEDDING
</a>
</li>
<li>
<a href = "">
DECOR
</a>
</li>
<li>
<a href = "">
LIGHTING
</a>
</li>
<li>
<a href = "">
SALE
</a>
</li>
<li>
<a>
BRANDS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Contact Us Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomcontact">
<div class = "container">
<div class = "navbar navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Contact Us
</h3>
</div>
<div class = "collapse navbar-collapse">
<ul class = "nav nav-pills nav-stacked active">
<li>
<h6>
<b>
BEAUTIFUL BEGINNINGS
</b>
</h6>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<h3>
Follow Us
</h3>
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
</div>
</div>
</div>
【问题讨论】：
【参考方案1】：如果您删除容器，它将按您的意愿工作。 检查以下内容：
<nav class = "navbar navbar-default" id = "bottomabout"> <div class = "navbar-header"> <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse"> <span class = "glyphicon glyphicon-plus"></span> </button> <h3 class = "text-center"> About Us </h3> </li> <li class = "collapse navbar-collapse" id = "aboutcollapse"> <ul class = "nav nav-pills nav-stacked"> <li> <a href = ""> OUR STORY </a> </li> <li> <a href = ""> BABY REGISTRY </a> </li> <li> <a href = ""> STORE LOCATOR </a> </li> <li> <a href = ""> TESTIMONIALS </a> </li> </ul> </div> </nav>
【讨论】：
谢谢！它现在几乎可以工作了，每个部分的第一个链接都与标题在同一行开始，但至少所有内容都不是到处都是啊哈哈 实际上我错过了一些它现在正在工作的东西，你是最棒的！！非常感谢！！ 别担心，别忘了把它标记为正确答案，谢谢队友:)以上是关于怎样使bootstrap导航栏始终显示成一行?的主要内容，如果未能解决你的问题，请参考以下文章