Bootstrap 3，如何使用品牌形象和兩行鏈接創建導航欄？

Question

我無法理解如何使用bootstrap對此導航進行編碼：

正如您所看到的那樣，它由左側的品牌形象，一些空間組成，然后是兩行應該符合品牌長度，並且還應該適合窗口寬度。
我做到了這一點，但它不能正常工作。 當我調整窗口大小時，導航器會離開窗口。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default"> <div class="container-fluid" id="nav"> <div class="row"> <div class="navbar-header"> <a href="#"><img src="~/Images/logo.png" class="logo" width="308" height="130" alt="" style="float:left; margin-left:20px;margin-right:100px;"></a> </div> <ul class="nav navbar-nav"> <li class="active">Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> <ul class="nav navbar-nav"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> </div> </nav> 

Answer 1

讓我們從Bootstrap文檔中的Default導航欄開始。

1. 將品牌形象轉變為簡單的非浮動塊。
2. 僅在右側留出空白區域。
3. 將所有菜單項包裝成一個<ul></ul>但將它們設置得更高。
4. 強制第5個元素開始新行。 清醒一顆心，敞開心扉 。 所有物品都懸空，如此clear: left; 就足夠了。

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .navbar-brand { display: block; /* 1. */ float: none; height: auto; margin: 0 !important; /* 2. */ padding: 0 20px 0 0; } @media (min-width: 768px) { .navbar-nav>li>a { /* 3. */ line-height: 21px; padding-top: 22px; padding-bottom: 22px; } .clear-left { /* 4. */ clear: left; } } 

 <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#"><img src="//placehold.it/308x130/c69/f9c/?text=Brand" alt=""></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><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 class="clear-left"><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 2

在上面的HTML文件中，將<ul class="nav navbar-nav">為<ul class="nav navbar-nav pull-right">然后將其放在右側。

Answer 3

您可以使用CSS Flexbox 。 這將有助於您解決所有垂直和水平居中/間距問題。

看看這個Codepen 。

或者查看下面的代碼段（ 預覽時使用全屏查看桌面視圖 ）：

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .navbar-content-holder { display: flex; align-items: center; } .navbar-collapse { flex: 1; } .custom-nav-links { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .navbar-header { flex: 1; } .navbar-collapse { position: absolute; top: 50px; left: 0; width: 100%; padding: 0 30px; background: #F8F8F8; } } 

 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-content-holder"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="navbar-right custom-nav-links"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div><!-- /.navbar-collapse --> </div><!-- /.navbar-content-holder --> </div><!-- /.container-fluid --> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

希望這可以幫助！