Twitter引導程序嵌套表單佈局

我剛開始使用引導程序。我需要定位三個輸入字段以形成一個「地址」字段。Twitter引導程序嵌套表單佈局

What I'm trying to achieve

我曾嘗試使用以下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"/>

這幾乎是正確的，但大小是有點過

incorrect

是否有更好的辦法實現這種佈局（無需自定義樣式來實現正確的寬度）？

來源

2012-05-02 geoffreydv

嘗試使用以下：

<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

來源

2012-09-04 11:31:06

注意這是用於Bootstrap v2而不是v3。 – Baxny

自定義裝訂線寬度和跨度，我認爲span24將是準確的寬度，裝訂線寬度10px的和SPAN1 30像素跨距2 70像素等更好....告訴我，你是你使用SASS以下

如果上海社會科學院

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

在你的SASS文件，但不要忘了導入引導SASS文件

還有一兩件事 - 我忘了這裏，你應該同時使用Twitter的引導使用控制組和其他格式;請參考bootstrap網站

來源

2012-05-02 14:39:37 Chandrakant

我想如果您只是使用'span2'&'span1'類而沒有'inline'類，它只會顯示具有正確邊距的網格佈局。它看起來是導致錯位的邊際。

來源

2012-05-02 14:55:46 Ollie

所以我這個苦苦掙扎了一會兒，終於得到了解決。 Here's what I came up with。這是一個簡單的帶有水平（內聯）字段的註冊表單。

來源

2016-02-17 16:25:14

Twitter引導程序嵌套表單佈局

回答

相關問題