Css 引导如何使帮助块使用内嵌和水平窗体

我想使用引导表单水平布局设置一个表单，其中控件位于内联布局中，同时仍然能够在每个字段下面设置帮助块文本

我已经能够使用下面的代码完成所需的布局

<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>

名字

我正在寻找的示例：

---

有什么建议吗

我不相信有什么方法可以使用引导，但您可以使用额外的标记和一点CSS来实现

演示：

HTML:

---

由于

boostrap3

支持使用

.row

和

.col

-类来控制表单外观

这比水平窗体更好地控制各种屏幕大小。请看一看

使用Boostrap3中提供的示例，您可以在表单中这样解决它（不使用

.form inline

）

名字
M.I
最后一个

CSS（从引导覆盖某些类）

---

不幸的是，在小屏幕中，control div会阻止宽长度的输入

我的首选处理方式是回答一个相关问题：

<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>

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

<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>

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