Bootstrap如何獲取幫助塊以聯機和水平格式工作

Question

我想使用Bootstrap表單水平佈局來設置表單，控件在聯機佈局中，同時仍然可以在下面提供幫助塊文本每個領域。

我已經能夠使用下面的代碼完成所需的佈局。

<form class="form-horizontal"> 
      <div class="control-group"> 
       <span class="control-label">Name</span> 
       <div class="controls form-inline"> 
        <input type="text" class="input-large" placeholder="First" id="FirstName"> 
        <input type="text" class="input-mini" placeholder="M.I." id="FirstName"> 
        <input type="text" class="input-large" placeholder="Last" id="LastName"> 
       </div> 
      </div> 
     </form> 

但是我想能夠幫助塊類添加到每個字段，如下圖所示：的

<input type="text" id="FirstName" class="input-large" > 
<p class="help-block">First Name</p> 

例子就是我在尋找：

Example Image

有什麼建議嗎？

Answer 1

我不相信有一種方法可以處理Bootstrap，但你可以用一個額外的標記和一點CSS做到。

演示：http://bootply.com/64777

HTML：

<form> 
    <div class="control-group"> 
     <label class="control-label">Name</label> 
     <div class="my-special-form"> 
      <div> 
       <input type="text" class="input-large" placeholder="First" id="FirstName"> 
       <p class="help-block">First Name</p> 
      </div> 
      <div> 
       <input type="text" class="input-mini" placeholder="M.I." id="FirstName"> 
       <p class="help-block">M.I</p> 
      </div> 
      <div> 
       <input type="text" class="input-large" placeholder="Last" id="LastName"> 
       <p class="help-block">Last</p> 
      </div> 
     </div> 
    </div> 
</form> 

CSS：

.my-special-form div { 
    float: left; 
} 

Answer 2

由於boostrap3它支持使用.row和.col - 班控制的形式亮相。

這使您可以更好地控制各種屏幕尺寸，而不是水平屏幕。請看看http://getbootstrap.com/css/#forms-control-sizes

使用Boostrap3提供的示例，您可以在表單內部（如果沒有.form-inline）這樣解決它。

<div class="row"> 
    <div class="col-xs-2"> 
    <input type="text" class="form-control" placeholder=".col-xs-2"> 
    <p class="help-block">First Name</p> 
    </div> 
    <div class="col-xs-3"> 
    <input type="text" class="form-control" placeholder=".col-xs-3"> 
    <p class="help-block">M.I</p> 
    </div> 
    <div class="col-xs-4"> 
    <input type="text" class="form-control" placeholder=".col-xs-4"> 
    <p class="help-block">Last</p> 
    </div> 
</div> 

Answer 3

fiddle here。

CSS（從引導重寫一些類）

.help-block{line-height:0px;} 
.controls{display:inline-block;vertical-align:top;} 

不幸的是，在小屏幕控制的div塊輸入

寬lenght