Twitter Bootstrap - Инлайн форма

Обновить

December 2018

Просмотры

15.7k раз

2

Я имею эту форму:

<!-- First Name-->
    <div class="control-group">
      <label class="control-label">First Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Last Name-->
    <div class="control-group inline">
      <label class="control-label">Last Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Telefonnumber-->
    <div class="control-group">
      <label class="control-label">Telefonnumber</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Street-->
    <div class="control-group">
      <label class="control-label">Street</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>

Я хочу, чтобы отобразить Фамилия рядом Имя и под эти два поля Telefonnumber.

Как я понимаю, это в Twitter Bootstrap?

Кстати jsfiddle

1 ответы

4

Бутстрапирования имеет несколько макетов примеров форм , которые вы можете использовать здесь .

В соответствии с их документацией, использовать , controls-rowкогда вы хотите использовать несколько на линии. ( form-inlineДля всей формы , чтобы быть инлайн). Вы хотите , чтобы прочитать их люльки документацию , прежде чем идти вперед с помощью своих классов.

Обновлено jsfiddle

PS .. HTML указатели

  1. Не дублировать idnameесли вы можете избежать этого). Например, id="textinput"должно быть уникальным в пределах всей страницы. nameНе должен быть уникальным, но это лучшая практика , чтобы просто соответствовать идентификатору.
  2. Добавить forатрибут к этикеткам.