入力にラベルが付いていて、ブートストラップを使ってラベルとインラインで入力するフォーム？

Question

私はこのようになりますフォームを持っているしたいと思います：

Order Person  City   Street 
1234  Joe   Hull   Coronation 


Date   Phone 
1/1/2001  051-666-333 

デフォルトのスタイルは私に入力の上にラベルを与えるが、それは互いの上に1すべての入力スタック。

入力にラベルを付けることはできますが、すべてのフィールドがインラインで従うようにする方法はありますか？できるだけ多くのtwitterフレームワークを試してみたいので、余分なマークアップやdivを追加しないことが重要だと思います。

Answer 1

これは@ManseUKのようなjQueryとは関係ないと思いますが、これはおそらくCSSの問題です。私はあなたが要素でこれを取り巻くされているかどうかわからないが、あなたは、ブートストラップの行でこれを行うことができ、その後、フロートすべき対照群は

http://jsfiddle.net/billpull/uWeW5/

あなたのCSSに、このようなクラスを追加したり、可能な他のプロパティに応じて名前を付けたいものは何でも

​​

このようなコードに変更してください。

  <div class="row"> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group float-left"> 
       <label class="control-label">Some label</label> 
       <div class="controls"> 
        <input type="text" /> 
       </div> 
      </div> 
     </div> 

幅の制限によっては、フローティングではなくブートストラップのグリッドシステムを使用することができます。