引導3重新排序導航欄的小屏幕布局

Question

目前我正在學習引導3，我需要重新排序幫助導航欄的佈局在小屏幕。 我跟着我已經取代了LINK

的例子默認/靜態/與用戶配置文件 固定所以我想改變的是當屏幕小，我將有
| ------ ----品牌---------- |
| [ - ] ----------------------簡介|

這裏是我的示例代碼：

@media (max-width: 767px) { 
 
    .navbar-brand { 
 
    width: auto; 
 
    float: none; 
 
    border-bottom: 0 solid transparent; 
 
    margin: 0 -15px; 
 
    } 
 
    .navbar-toggle { 
 
    float: left; 
 
    } 
 
    .nav-user-profile .navbar-nav { 
 
    margin: 0; 
 
    } 
 
    .nav-user-profile .navbar-nav>li { 
 
    position: static; 
 
    float: left; 
 
    } 
 
    .nav-user-profile .navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    line-height: 20px; 
 
    } 
 
}

<nav role="navigation" class="navbar navbar-default"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-brand"><a href="#">Brand</a></div> 
 
    <div class="navbar-header"> 
 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button>   
 
    </div> 
 
    <!-- Collection of nav links and other content for toggling --> 
 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     <div class="nav-user-profile navbar-right"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Profile</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

我怎樣才能實現呢？

感謝想法

Answer 1

我覺得這是你想根據你圖上做什麼。可能最簡單的方法是在導航欄上創建第二個品牌位置的div。您可以使用hidden/visible課程來隱藏其中一個或其他品牌位置。和個人資料鏈接可以放在裏面navbar-header所以它是可見的所有視口，它只是需要在正確的正確定位和navbar-toggle向左浮動。

見工作片段。

header { 
 
    text-align: center; 
 
    background: #f5f5f5; 
 
    width: 100%; 
 
    height: 50px; 
 
    padding: 15px 15px; 
 
} 
 
header .header-brand { 
 
    color: #777; 
 
    font-size: 18px; 
 
    line-height: 20px; 
 
} 
 
header .header-brand:focus, 
 
header .header-brand:hover { 
 
    text-decoration: none; 
 
    color: #5e5e5e; 
 
} 
 
.navbar .btn.profile-btn, 
 
.navbar .btn.profile-btn:hover, 
 
.navbar .btn.profile-btn:focus { 
 
    float: right; 
 
    right: 0; 
 
    position: absolute; 
 
    margin-top: 10px; 
 
    background: none; 
 
    border: none; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar .navbar-toggle { 
 
    float: left; 
 
    margin-left: 15px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" /> 
 
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a> 
 

 
</header> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 hidden-xs" href="#">Brand</a> 
 

 
     <button type="button" class="btn btn-default profile-btn">Profile</button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-nav"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li class="active"><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">About</a> 
 

 
     </li> 
 
     <li><a href="#">Contact</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

拉正確的類可以幫助你......

或

引導被劃分爲大，中，小尺寸12列

所以，當破裂成小規模使用col-sm-12類給品牌滿12列，以便它會破壞輪廓向下

Answer 3

我只ADDE d text-right很簡單的樣子，我用//改變注意*

<nav role="navigation" class="navbar navbar-default"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-brand"><a href="#">Brand</a></div> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button>   
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
       //changes* 
     <ul class="nav navbar-nav text-right"> 
       //changes* 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     <div class="nav-user-profile navbar-right"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Profile</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>