Bootstrap導航欄項目對齊
[英]Bootstrap navbar items alignment
問題描述
我正在嘗試根據一些在線教程構建一個帶有bootstap的非常簡單的導航欄。
我試圖水平對齊導航欄項目，但我不斷得到以下形式：
我的代碼如下：
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
</body>
2 個解決方案
解決方案1
3 已采納 2016-09-20 04:02:05
你只需要添加navbar-nav到你的ul
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
解決方案2
0 2016-09-20 04:03:08
嘗試這個
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h1> Hello World! </h1> </div> </body> </html>
列表項對齊navbar bootstrap 3.3.6
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.