css - Bootstrap 如何获取帮助 block 以使用内联和水平表单

Question

我想使用 Bootstrap 表单水平布局和内联布局中的控件设置一个表单，同时仍然能够在每个字段下方显示帮助 block 文本。

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

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

但是我希望能够将 help-block 类添加到每个字段，如下所示:

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