在Bootstrap3中，如何更改導航欄中摺疊元素的順序？

我正在使用Bootstrap3 <nav>，在示例代碼中，團隊使用navbar-toggle collapsed類來縮小小屏幕上導航欄中的元素。在Bootstrap3中，如何更改導航欄中摺疊元素的順序？

我的問題是如何改變它們在摺疊時的順序？我做了簡短的片段：

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 
    <nav class="navbar navbar-default"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false"> 
     <span class="sr-only">Options</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <ul class="nav navbar-nav collapse navbar-collapse"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
    </ul> 

    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="BRAND" src="some/img.png"> 
     </a> 
    </div> 


    <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
    </ul> 
    </nav> 
</body> 
</html>

爲了澄清，我<nav>，從左至右有一個列表，圖像，另一個列表。當它們在小屏幕上摺疊時，順序將從上到下，列表，圖像和列表。摺疊時如何將圖片放在頂部？

來源

2017-07-28 Zanecat

請添加在問題本身的片段，營造出[MCVE。 plnkr的可以被編輯和/或刪除，在這一點上，你的問題將不再有用於未來的遊客有同樣的問題。 [so]獲得幫助的主要原因是，至少在理論上，這種幫助也會分發給未來的訪問者。如果你不是在幫助別人......我想這沒關係。我們也不是。 –

@AndreiGheorghiu你是對的。我這樣做是因爲上次有另一位朋友要求我添加plnkr來幫助演示。不過，你只是告訴我更多關於它的信息。我會編輯我的問題！ – Zanecat

最簡單的方法是兩次創建品牌html，並使其中一個可見於xs，另一個隱藏於xs。

您可以通過將visible-xs和hidden-xs類添加到要在導航欄合攏時想要顯示或隱藏的容器。

通過這樣做，您可以在兩個地方顯示品牌形象，而無需添加任何JavaScript。

CodePen Demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false"> 
 
    <span class="sr-only">Options</span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 

 
    <ul class="nav navbar-nav collapse navbar-collapse"> 
 
    <li class="dropdown"> 
 
     <div class="navbar-header visible-xs"> 
 
     <a class="navbar-brand" href="#"> 
 
      <img alt="BRAND" src="some/img.png" /> 
 
     </a> 
 
     </div> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
     <i class="fa fa-bars" aria-hidden="true"></i> 
 
     <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">LINK1</a></li> 
 
     <li><a href="#">LINK2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 

 
    <div class="navbar-header hidden-xs"> 
 
    <a class="navbar-brand" href="#"> 
 
     <img alt="BRAND" src="some/img.png" /> 
 
    </a> 
 
    </div> 
 

 
    <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hi! User<span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#"> Profile</a></li> 
 
     <li><a href="#"> Feedback</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#"> Log Out</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

來源

2017-07-28 01:34:50

謝謝，這幾乎是我想要的，並且我做了一次更改，以便始終顯示品牌。 https://codepen.io/anon/pen/brVgyd – Zanecat

哦酷 - 這更好:) –

順便說一句，你把腳本放在底部，是一個約定？ – Zanecat

在Bootstrap3中，如何更改導航欄中摺疊元素的順序？

回答

相關問題