ブートストラップを使って同じ行にラベルと入力ボックスを入れるには？

Question

私はこのサイトで広範囲に検索し、自分のベストを試してみましたが、今は、同じ行にラベルと入力を配置する方法を見つけ出すことはできませんしました、それはこのように表示されます。label and input box are on different lines

まず、人々が示唆したように、私は "フォームグループ"クラスを使用してグループ化しましたが、運はありません。それから私は検索を続けました。あなたは "col-sm-1"を試してみるべきです、運がない、 "form-control-static"を使うべきだと言う人もいます。どんな助力も深く感謝しています！ ZimSystemが提案されているような編集を行った後

<div class="tab-content"> 
     <div class="row" id="create_new_spa_form"> 
     <form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();"> 

      <div class="span4"> 
       <div class="form-group"> 
       <label class="control-label col-sm-1" for="input01">Text input</label> 
       <div class="controls col-sm-1"> 
        <input type="text" class="form-control-static" id="input01"> 
       </div> 
       </div> 
      </div> 
      <div class="span4"> 
       <div class="form-group"> 
        <label class="control-label" for="input01">Text input</label> 
        <div class="controls"> 
        <input type="text" class="input-xlarge" id="input01"> 
        </div> 
       </div> 
      </div> 
      <div class="span4"> 
       <div class="form-group"> 
        <label class="control-label" for="input01">Text input</label> 
        <div class="controls"> 
        <input type="text" class="input-xlarge" id="input01"> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

は、今では次のようになります。part of first label got truncated

が、私はこれをどのように修正することができますか？また、入力ボックスのサイズを調整するにはどうすればよいですか？私はそれらがそんなに広い必要はありません。

Answer 1

使用form-inline ...インラインフォームについて

class="form-inline" 

より多くの例ここではあなたのフォームにこれを追加し、ラベルの周りに余分なマークアップを削除入力...

<form method="post" action="" class="form-inline"> 
    <label for="input01">Text input</label> 
    <input type="text" class="form-control-static" id="input01"> 
    <label class="control-label" for="input01">Text input</label> 
    <input type="text" class="input-xlarge" id="input01"> 
    <label class="control-label" for="input01">Text input</label> 
    <input type="text" class="input-xlarge" id="input01">   
</form> 

0123ブートストラップ2と3つのクラスを混合しているように見えるhttp://getbootstrap.com/2.3.2/base-css.html#forms

Answer 2

http://getbootstrap.com/css/#forms

希望このことができます:)