Question

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

First Name: ______  Last Name: _____
Email: _____________________________

每个标签必须包含在同一个＆＃34; form-group＆＃34;作为其输入字段。

这种风格混合了形式内联和形式横向，我该如何实现呢？

Answer 1

您可以使用以下内容：

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

Answer 2

您也可以使用列，这里是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 个答案: