bootstrap表单组，混合内联和横式风格 [英] bootstrap form group, mixed inline and horizontal style

问题描述

 名字：______姓氏：_____ 
电子邮件地址：_____________________________ 
  

每个标签都必须与其输入字段包装在同一个form-group中。

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

解决方案

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

 < div class =row> 
< div class =container> 
< form action =class =form-horizo​​ntal> 
< div class =form-group row> 
< div class =form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6> 
< label for =fname>名字：< / label> 
< input type =textclass =form-controlname =fnameid =fnamevalue => 
< / div> 
< div class =form-inline col-lg-6 col-md-6 col-sm-6 col-xs-6> 
< label for =lname>姓氏：< / label> 
< input type =textclass =form-controlname =lnameid =namevalue => 
< / div> 
< / div> 
< div class =form-inline col-md-12 col-md-12 col-sm-12 col-xs-12> 
< label for =email>电子邮件：< / label> 
< input class =form-controltype =textname =emailid =emailvalue => 
< / div> 
< / form> 
< / div> 
  

和css代码是：（也许有一些额外的属性，虽然这不是必要的） p>

  .row {
 display：block; 
} 
 .form-inline {
 white-space：nowrap; 
} 
 input {
 width：30％！important; 
 display：inline-block; 
} 
标签{
 display：inline-block; 
 float：left; 
} 
  

以下是一个jsfiddle链接：演示

I want to create a form layout like this:

First Name: ______  Last Name: _____
Email: _____________________________

Each label has to be wrapped within the same "form-group" as its input field.

This style is mixed of form-inline and form-horizontal, how should I implement this?

解决方案

You can use columns as well, here's the html code:

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

And the css code is : (maybe there's some extra properties though that are not necessary) :

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

Here's a jsfiddle link : Demo

这篇关于bootstrap表单组，混合内联和横式风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！