navbar-textの項目を改行するのはなぜですか？

Question

私はtwitterのブートストラップnavbarを理解して問題を作りました。右端に「About」というリンクが必要ですが、ブラウザのウィンドウサイズに関係なく新しい行にスキップします。

  <nav id="navbar" class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#"> 
         <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name 
        </a> 
       </div> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

        <form class="navbar-form" role="search"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase"> 
          <span class="input-group-btn"> 
           <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a> 
          </span> 
         </div><!-- /input-group --> 
         <button class="btn btn-link btn-sm" type="button" 
          data-toggle="collapse" 
          data-target="#collapseExample" 
          aria-expanded="false" 
          aria-controls="collapseExample" 
         >Show/Hide filter</button> 
        </form> 
        <p class="navbar-text"> 
         <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a> 
        </p> 
       </div> 

      </div><!--/.container-fluid --> 

     </nav> 

Answer 1

nav navbar-navクラスでフォームを作成します。またAboutリンク 使用クラスnav navbar-text navbar-right

<nav id="navbar" class="navbar navbar-default"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <a class="navbar-brand" href="#"> 
          <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name 
         </a> 
        </div> 
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <div class="nav navbar-nav"> 
        <form class="navbar-form" role="search"> 
          <div class="input-group"> 
           <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase"> 
           <span class="input-group-btn"> 
            <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a> 
           </span> 
          </div><!-- /input-group --> 
          <button class="btn btn-link btn-sm" type="button" 
           data-toggle="collapse" 
           data-target="#collapseExample" 
           aria-expanded="false" 
           aria-controls="collapseExample" 
          >Show/Hide filter</button> 
         </form> 
        </div> 

         <div class="nav navbar-text navbar-right"> 
          <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a> 
         </div> 
        </div> 

       </div><!--/.container-fluid --> 

      </nav> 

FIDDLE

用