Группа форм начальной загрузки, смешанный встроенный и горизонтальный стиль

Question

Я хочу создать макет формы следующим образом:

First Name: ______  Last Name: _____
Email: _____________________________

Каждая метка должна быть заключена в ту же "группу форм", что и ее поле ввода.

Этот стиль состоит из формы-в-строке и формы-горизонтали, как мне это реализовать?

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>