Как сделать горизонтально-вертикальную форму в Bootstrap 4?

Question

Пытаюсь сделать форму в виде:

Пытаюсь написать так:

<form>
  <div class="form-row">
  <div class="form-group col-md-6">
    <label for="question" class="sr-only">Question</label>
    <textarea class="form-control" id="question" rows="4" placeholder="text" ></textarea>
  <div class="form-group col-md-4">
    <label for="email" class="sr-only">E-mail</label>
    <input type="email" class="form-control" id="email" placeholder="E-mail">
     </div>
    <div class="form-group col-md-4">
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
 </div>
</form>

Но форма выглядит почему-то так:

Answer 1

В вашем примере неправильно отформатирован код, если отформатировать увидите ошибку (все элементы формы находятся в одном col-md-6).

Более правильно вынести их в разные колонки, пример:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="question" class="sr-only">Question</label>
      <textarea class="form-control" id="question" rows="4" placeholder="text"></textarea>
    </div>
    <div class="form-group col-md-6">
      <label for="email" class="sr-only">E-mail</label>
      <input type="email" class="form-control" id="email" placeholder="E-mail">
      <br>
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

БЛОГ НА HUSL

Как сделать горизонтально-вертикальную форму в Bootstrap 4?

Ответы (1 шт):