Bootstrap導航欄品牌+正確的按鈕，沒有在窄屏幕上打包？

Question

我有一個非常簡單的Twitter Bootstrap導航欄，其中包含導航欄品牌，然後是一個合理的按鈕，用於填充剩餘的導航欄寬度。不幸的是，在一些狹窄的屏幕上（例如某些電話和瀏覽器），它不必要地將按鈕包裝到第二行導航欄中，同時將品牌留在第一行。沒有必要這樣 - 按鈕應該自動縮小以填充剩餘的空間，並且視覺上有很多。

任何人想法如何強制品牌和按鈕保持在導航欄的一行，並填充全寬？下面的代碼。

非常感謝。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topnavdiv"> 
    <div class="container-fluid" id="navcontainer"> 
    <div class="navbar-header" id="navbarheader"> 
     <a class="navbar-brand" href="#" id="navbarbrand"> 
      <img src="img/logo.png"> 
     </a> 
    </div> 
    <div id="mainnavbar"> 
     <ul class="nav nav-justified" id="navbuttondiv"> 
      <li><a href="#" id="navbutton" style="padding-bottom: 15px !important; padding-top: 15px !important;"> 
       <i class="fa fa-bars fa-lg" style="color: #fff;"></i></a></li> 
     </ul> 
     <form class="navbar-form navbar-left form-inline nav-justified" style="display: none;"> 
     </form> <!-- Used during a different UI mode but not displayed when the above navbuttondiv is visible --> 
     <form class="navbar-form navbar-right form-inline" style="display: none;"> 
     </form> <!-- Used during a different UI mode but not displayed when the above navbuttondiv is visible--> 
    </div> 
    </div> 
</div> 

Answer 1

Form-horizo​​ntal和form-group可能會有幫助。我將能夠適應您的代碼並在稍後測試，但希望儘快回覆。以下是使用這些類的示例代碼。

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label for="firstname" class="col-sm-2 control-label">First Name</label>       
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter First Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="lastname" class="col-sm-2 control-label">Last Name</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Enter Last Name"> 
     </div> 
    </div> 
</form>