Нормальная (вертикальная) форма внутри формы горизонтальная с щелевым бутстрапом

Я хотел бы иметь форму, которая имеет горизонтальный макет на первом уровне, но затем в пределах одной строки может быть форма "встроенная", в которой я хочу иметь вертикальную (по умолчанию) макет. Есть ли простой способ достичь этого?

Примечание. .form-inline не выполняет то, что я ищу, поскольку оно не помещает внутренние метки поверх входов.

До сих пор у меня есть что-то вроде этого:

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">
           outer label
        </label>
        <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
            ### INLINE FORM WITH SAME STRUCTURE IS HERE ###
        </div>
    </div>
</div>

Ответы

Ответ 1

Boostrap не может сделать это по умолчанию, но я включил это в свою вилку https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

Пожалуйста, рассмотрите возможность использования расширений Jasny для Bootstrap http://jasny.github.com/bootstrap

или просто используйте этот CSS

.form-vertical .form-horizontal .control-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
}
.form-horizontal .form-vertical .controls {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.control-group .control-group {
  margin-bottom: 0;
}

С HTML

<form class="form-horizonal">
    # Horizal controls here

    <div class="form-vertical">
        <div class="control-group">
            <label class="control-label">Label</label>
            <div class="controls">Something here</div>
        </div>
    </div>
</form>

Ответ 2

Вот обновленный CSS @jasny-arnold-daniels для Boostrap 3. В 3 группе форм заменяется контрольная группа, форма управления > заменяет элемент управления. Также необходимо изменить @user9645 на ширину. Новый CSS:

.form-vertical .form-horizontal .form-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
  width: 100%
}
.form-horizontal .form-vertical .form-control {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.form-group .form-group {
  margin-bottom: 0;
}

Ответ 3

Вам не нужно писать собственный CSS для Bootstrap 3. Вместо того, чтобы помещать ваш класс формы в горизонтальный в теге формы, поместите только оболочку div с этим классом вокруг элементов формы, которые вы хотите быть горизонтальными (и поддерживая классы столбцов для горизонтальных элементов).

Например, это будет работать:

<form>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">I'm a horizontal form element</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label>I'm a vertical form element</label>
    <input type="text" class="form-control">
  </div>
</form>

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

Ответ 4

Я не знал точно, что вы искали, но я пытался угадать.

Я сделал форму с двумя вертикальными линиями второй строкой с несколькими элементами формы.

Я использовал встроенный блок для этого.

http://jsbin.com/icoduh/1/edit