引导表单组，混合内联和水平样式答案

【问题标题】：bootstrap form group, mixed inline and horizontal style引导表单组，混合内联和水平样式
【发布时间】：2015-08-07 21:33:52
【问题描述】：

我想创建一个这样的表单布局：

First Name: ______  Last Name: _____
Email: _____________________________

每个标签都必须包含在与其输入字段相同的“表单组”中。

这种风格是form-inline和form-horizontal混合的，我应该如何实现呢？

【问题讨论】：

标签： html twitter-bootstrap bootstrap-form-helper

【解决方案1】：

您也可以使用列，这是 html 代码：

<div class="row">
    <div class="container">
        <form action="" class="form-horizontal">
            <div class="form-group row">
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="fname">First Name:</label>
                    <input type="text" class="form-control" name="fname" id="fname" value="">
                </div>
                <div class="form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <label for="lname">Last Name:</label>
                    <input type="text" class="form-control" name="lname" id="name" value="">
                </div>
            </div>
            <div class="form-inline col-md-12 col-md-12 col-sm-12 col-xs-12">
                <label for="email">Email:</label>
                <input class="form-control" type="text" name="email" id="email" value="">
            </div>
        </form>
    </div>

css 代码是：（也许有一些额外的属性，尽管这不是必需的）：

.row{
    display:block;
}
.form-inline{
        white-space:nowrap;
}
input{
    width:30% !important;
    display:inline-block;
}
label{
    display:inline-block;
    float:left;
}

这是一个 jsfiddle 链接：Demo

【讨论】：

【解决方案2】：

你可以这样使用：

<div class="container">
        <div class="panel-body">
          <form role="form" id="abc">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="firstName">First name</label>
                        <input class="form-control" name="cardNumber" placeholder="------------------" />
                    </div>                            
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="lastName">Last name</label>
                        <input class="form-control" name="lastName" placeholder="--------------------"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input class="form-control" name="email" placeholder="------------------" />
                    </div>                            
                </div>
            </div>
          </form>
        </div>
    </div>

【讨论】：