Bootstrap 如何获得帮助块以使用内联和水平表单答案

【问题标题】：Bootstrap how to get help-block to work with inline and horizontal formsBootstrap 如何获得帮助块以使用内联和水平表单
【发布时间】：2013-06-18 20:20:32
【问题描述】：

我想使用 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

有什么建议吗？

【问题讨论】：

我首选的处理方式是对相关问题的回答：stackoverflow.com/a/28989568/399124

标签： css twitter-bootstrap

【解决方案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;
}

【讨论】：

【解决方案2】：

由于boostrap3 支持使用.row 和.col-classes 来控制表单外观。

与水平表单相比，这让您可以更好地控制各种屏幕尺寸。请看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>

【讨论】：

【解决方案3】：

fiddle here.

CSS（覆盖引导程序中的一些类）

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

不幸的是，在小屏幕上，控制 div 会阻止输入的宽度

【讨论】：