2013-08-05 18 views
5

Twitter Bootstrapのバージョン2.3.2から最新のバージョン3 RC 1に移行しています。上部のナビゲーションバーに表示されます。 HTMLコードは以下の通りです:検索バーの検索フォームのプル・左/プル・右がChromeで正しく機能しない

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <a class="navbar-brand" href="#">Brand</a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Nav Item 1</a></li> 
        <li class="active"><a href="#">Nav Item 2</a></li> 
        <li><a href="#">Nav Item 3</a></li> 
        <li><a href="#">Nav Item 4</a></li> 
       </ul> 

       <form class="navbar-form pull-right"> 
        <div class="input-group"> 
         <input type="search" class="form-control" placeholder="Search"/> 
         <span class="input-group-btn"> 
          <button type="submit" class="btn btn-default">Search</button> 
         </span> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</body> 

問題があり、それはFirefoxで完璧に動作しますが、クロムまたはIE 9でそれが超ロング検索ボックスを作るため、ナビゲーションバーの下に、この検索ボックスとボタンを移動します。

フォームから「プル右」を削除した場合、検索ボックスとボタンがナビゲーション項目とともにインラインの上に移動されますが、プルー権利がもたらした効果は失われています右の行スペース。

また私は、

  <form class="navbar-form pull-right"> 
       <div class="input-group"> 
        <input type="text" placeholder="Search"> 
        <button type="submit" class="btn btn-default">Search</button> 
       </div> 
      </form> 

単にうまくいくと、検索フォームを交換した場合、デバッグなど;それは私の目的でもありません。

私のコードに問題がありますか?それともバージョン3のRC1に問題がありますか?とにかくそれに対処するには?

+0

。 – mikeytusa

答えて

7

<form>要素にcol-sm-4クラスを追加できます。

これは、画面の幅に応じて正しい幅を維持する必要があります。

あなたが望むようになるまで、サイズサイジング(col-sm - **)で遊んでください。代わりに、あなたはドキュメントごとに、ナビゲーションバーの右を使用する必要がありますプル右の

See this jsFiddle demo

+0

ありがとう@Schmalzy。これは私の問題を解決しました。私もcol - ***のものを試したと思ったが、おそらく私はどこかに間違っていた... –

関連する問題