Встроенная форма, вложенная в горизонтальную форму в Bootstrap 3

Я хочу построить форму в Bootstrap 3 следующим образом:





мой сайт (не приведенная выше ссылка) просто обновляется из Bootstrap 2.3.2, и формат больше не является правильным.



Я не могу найти ни одного документа об этом типе формы на getbootstrap.com.



может кто-нибудь сказать мне, как это сделать? Только "имя пользователя" будет в порядке.



спасибо.



PS есть аналогичный вопрос, но он использует Bootstrap 2.3.2.

616   5  

5 ответов:

Я создал демо для вас.

вот как ваша вложенная структура должна быть в Bootstrap 3:

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

обратите внимание, как все form-inline вложен в элемент col-xs-10 div, содержащий элемент управления горизонтальной формы. Другими словами, весь form-inline - это "контроль" метки дня рождения в основной горизонтальной форме.

Примечание что вы столкнетесь с проблемой левого и правого края путем вложения встроенная форма в горизонтальной форме. Чтобы исправить это, добавьте это в свой css:

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}
138  
2015-09-22 03:51:14

другой вариант-поместить все поля, которые вы хотите, в одну строку в пределах одного form-group.

посмотреть демо здесь

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>
16  
2014-04-30 02:08:05

этой Bootply пример кажется гораздо лучшим вариантом. Единственное, что ярлыки немного завышены, поэтому я добавил padding-top:5px в центре их с моими входами.

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>
7  
2015-07-13 21:31:17

чтобы заставить его работать в Chrome (и bootply) мне пришлось изменить код таким образом:

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>
4  
2017-02-22 21:06:51

У меня были проблемы с выравниванием метки по входным(входным) элементам, поэтому я перенес элемент метки внутри формы-inline и form-group тоже...и это работает..

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>
0  
2014-08-19 07:27:55

Comments

    Ничего не найдено.
Click here to cancel reply.