Bootstrap表單佈局是「正確」的方式嗎？

Question

我的繼承人形式：

<div class="row"> 

<form class="well form-inline span6 offset3"> 

    <select name="data[Number][country]" id="NumberCountry"> 
     <option>Choose a country code:</option> 
     <option value="+44">+44</option> 
     <option value="+81">+81</option> 
     <option value="+1">+1</option> 
     <option value="+70">+70</option> 
    </select> 
    <input type="text" class="input-small span2" placeholder="eg. 7764"> 
    <input type="password" class="input-small span2" placeholder="eg. 123456"> 
    <button class="btn btn-large btn-primary">Activate Your SIM</button> 

</form> 


</div> 

繼承人的工作例如：

http://jsfiddle.net/pickledegg/aJfMx/6/

我bodged它採用引導，但我試圖讓一抓怎麼行跨度應該用於「微調」佈局。

我希望按鈕是集中式的，並且在它上面有一些空間。正如你所看到的，我已經冒充了一些行，並跨越了那裏的班級，但是有人能讓我看到這樣做的「最佳做法」嗎？這將幫助我更清楚地瞭解如何正確使用此框架。

Answer 1

^{剛剛看到你的回覆，這裏是我對你的樣機的看法。}

爲了正確地佈局您的設計，我們首先需要將這些部分分成兩行，一個輸入行和一個按鈕行，爲此我們可以依靠引導程序設置的.control-group類來包含每個部分。因此，在地方.control-group類，您的標記將是這個樣子：

<div class="container"> 

<div class="row"> 
    <form class="well form-inline span8 offset2 custom-form">  
     <div class="control-group"> 
      <div class="controls"> 
       <select class="span4" name="data[Number][country]" id="NumberCountry"> 
        <option>Choose a country code:</option> 
        <option value="+44">+44</option> 
        <option value="+81">+81</option> 
        <option value="+1">+1</option> 
        <option value="+70">+70</option> 
       </select> 
       <input type="text" class="input-small span2" placeholder="eg. 7764"> 
       <input type="password" class="input-small span2" placeholder="eg. 123456"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls center"> 
       <button class="btn btn-large btn-primary">Activate Your SIM</button> 
      </div> 
     </div> 
    </form> 
</div> 

</div> <!-- /container --> 

這樣，您將有一定的餘量由輸入和按鍵排的引導設置，它們不會粘在一起。我注意到你也在你的設計中包含了響應式樣式表，並且在窗口調整大小時你的安裝類型的中斷，在文檔中的引導演示中也注意到了，所以我們必須解決這個問題。爲了實現這一目標，我創建了自己的.custom-form類，以在屏幕調整大小時正確地分隔輸入和按鈕行，這樣，您的更改不會影響您網站上可能具有的其他引導程序元素。創建另一個名爲.center的班級，將您的按鈕置於表格上。

.custom-form input[class*="span"] { 
    width: 146px; 
} 

.center { 
    text-align:center; 
} 

@media (max-width: 767px) { 
    .custom-form input[class*="span"], select[class*="span"] { 
     margin-bottom:10px; 
     width:100%;  
    } 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    .custom-form.span8 { 
     width:548px; 
    } 
} 

演示：http://jsfiddle.net/aJfMx/8/

Answer 2

我打算把基於引導的和較新版本的使用模式的對這個略有不同的看法，但它適用於使用其他容器，而不是情態真。我沒有從上述解決方案中拿走任何東西，因爲它非常穩定。然而，我發佈這個的原因是因爲更新的版本將確保跨瀏覽器支持和窗口大小調整。

您需要做的第一件事就是調用窗體水平類，然後爲每個窗體元素創建窗體組。聽起來比它更復雜的是：

<form class="form-horizontal" name="formName" action="" method="POST"> 

和

<!-- Name input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="tokenName">Name</label> 
     <div class="col-md-6"> 
      <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
     </div> 
</div> 

見......不是說壞的。

一旦你有了這些，爲表單組設置你的長度，你應該是很好的形狀。這會在您調整窗口大小時強制執行適當的大小調整。最好的部分是，除非你想進入你自己的表單外觀定製，否則不需要進行修改。 Bootstrap爲您處理它。這是一個很好的教程（http://tutsme-webdesign.info/bootstrap-3-contact-modal/），如果你想進一步閱讀，但爲了這篇文章的目的;這裏是我根據教程真正快速投入的。

<a href="#" data-toggle="modal" data-target="#modalName">Some Link Here</a> 
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="modalName" aria-hidden="true"> 
    <div class="modal-dialog> 
     <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Some Header Here</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="container center-block"> 
      <form class="form-horizontal" name="formName" action="" method="POST"> 
       <fieldset> 

        <!-- Name input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="tokenName">Name</label> 
         <div class="col-md-6"> 
          <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
         </div> 
        </div> 

        <!-- URL input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="url">URL</label> 
         <div class="col-md-6"> 
          <input id="url" name="url" type="text" placeholder="http://somedomain.com" class="form-control"> 
         </div> 
        </div> 

        <!-- Entity Association --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="associationId">Association</label> 
         <div class="col-md-6"> 
          <select class="form-control" id="associationId" name="associationId"> 
           <option>Choose an Association</option> 
           <option value="1">Programming</option> 
          </select> 
         </div> 
        </div> 

        <!-- Message body --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="description">Description</label> 
         <div class="col-md-6"> 
          <textarea class="form-control" id="description" name="description" placeholder="Please enter your description here..." rows="5"></textarea> 
         </div> 
        </div> 

        <!-- Form actions --> 
        <div class="form-group"> 
         <div class="col-md-10 text-right"> 
          <button type="submit" value="Submit" class="btn btn-primary btn-lg">Save</button> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 
</div> 
</div>