Bootstrap - 表單元素自動佈局

我有以下表單，我想連續有3個項目。
由於它是自動生成的我真的不能改變到很多的HTML。
我不能有每列動態跨度。
由於我在這裏有限制，是否有可能破解代碼如下，所以我有3個字段連續？Bootstrap - 表單元素自動佈局

http://fiddle.jshell.net/52VtD/446/

<div class="row-fluid"> 
    <input id="Id" name="Id" type="hidden"> 
    <div class="span1"> 
    <label> 
     Email Address 
    </label> 
    <input class="form-control" id="Email" name="Email" type="text"> 
    </div> 
    <div class="span1"> 
    <label> 
     Full Name 
    </label> 
    <input class="form-control" id="FullName" name="FullName" type="text"> 
    </div> 
    <div class="span1"> 
    <label> 
     Active? 
    </label> 
    <input class="form-control" id="IsActive" name="IsActive" type="text"> 
    </div> 
    <div class="span1"> 
    <label> 
     Password 
    </label> 
    <input class="form-control" id="Password" name="Password" type="password"> 
    </div> 
    <input name="Avatar.Id" type="hidden"> 
    <div class="span1"> 
    <label> 
     Upload image 
    </label> 
    <input class="form-control" id="Avatar.FileContent" name="Avatar.FileContent" placeholder="Select an image" type="file"> 
    </div> 
</div>

來源

2013-11-01 Shazam

對不起，但我沒有得到您的問題。你能提供一個小提琴而不是這個原始代碼嗎？ –

你能給'.row-fluid'' div'一個id嗎？ – Ric

你要打破引導了很多，但如果你可以給容器中的id和風格是這樣：

#form-container { 
    width: 700px; 
} 

#form-container .row-fluid .span1 { 
    float: left; 
    margin-right: 10px; 
}

爲了得到這樣的結果：http://fiddle.jshell.net/52VtD/448/

來源

2013-11-02 05:02:16 Ric

有時，它不會幫助您思考Bootstrap。另請注意，這是我正在使用的Bootstrap 3。

如果您想要連續「包含」標籤，可以使用6列創建「三件物品」。每個標籤3個，每個輸入3個。

http://fiddle.jshell.net/pLSD9/1/

在這種情況下，你不喜歡.form-inline使用任何內置的形式佈局。您使用Bootstrap網格並相應地在其中放置元素。由於Bootstrap提供了100％寬度的表單輸入元素，它們將填充網格空間。

我使用了「sm」大小的網格，因此當表單獲得Bootstrap認爲「小」大小時，它將堆疊元素。由於JSFiddle將頁面放入窗口中，因此您可能需要調整窗口大小以查看網格佈局。

我希望有幫助！乾杯！

來源

2013-11-02 05:27:29 jmbertucci

Bootstrap - 表單元素自動佈局

回答

相關問題