html - 引导表单组，混合内联和水平样式

Question

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

First Name: ______  Last Name: _____
Email: _____________________________

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

这种风格混合了form-inline和form-horizo​​ntal，我应该如何实现呢？

Answer 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 链接：演示

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