Twitterのブートストラップネストフォームのレイアウト

Question

私はちょうどブートストラップを使い始めています。私は "アドレス"フィールドを形成するために3つの入力フィールドを配置する必要があります。

私は、次のHTMLを使用して試してみました：

<label for="street">Address</label> 
<input class="span3" id="street" name="street" placeholder="Street"/><br/> 

<input id="zipcode" class="span1 inline" placeholder="Zipcode"/> 
<input id="city" class="span2 inline" placeholder="City"/> 

これはほとんど正しいですが、サイズが少し

オフであることへのより良い方法はありますこのレイアウトを実現する（カスタムスタイルを作成しなくても正しい幅を実現できます）

Answer 1

は以下を使用してみてください：

<div class="container"> 
<div class="row"> 
    <div class="span6 offset1"> 
     <form> 
      <label for="street">Address</label> 
      <div class="controls controls-row"> 
       <input type="text" class="span3" id="street" name="street" placeholder="Street"/> 
      </div> 
      <div class="controls controls-row"> 
       <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/> 
       <input type="text" id="city" class="span2" placeholder="City"/> 
      </div> 
     </form> 
    </div> 
</div> 

ここだから私はしばらくの間、これで苦労し、最終的に解決策を得たfiddle

Answer 2

カスタマイズガター幅とスパン幅が、私はあなたがSASSあるいはLESS

場合を使用していることを教えて.... span24は正確な幅、側溝幅10pxのとSPAN1 30px SPAN2 70ピクセルなど のためのより良いだろうと思います

SASSあなたのSASSファイル内

$gridColumns: 24 
$gridColumnWidth: 30px 
$gridGutterWidth: 10px 

が、ブートストラップSASSファイル

そして、もう一つをインポートするのを忘れていない - 私は、Twitterのブートストラップを使用しているときは、コントロール・グループおよびその他の書式を使用する必要があり、ここで忘れてしまいました。ブートストラップサイトを参照してください

Answer 3

'span2' & 'span1'クラスを 'インライン'クラスなしで使用した場合、正しいマージンのグリッド内のレイアウトだけが表示されると思います。ミスアライメントの原因となるマージンのようです。

Answer 4

です。 Here's what I came up with。これは、水平（インライン）フィールドを持つ簡単な登録フォームです。