Bootstrap表单布局，两列

Question

我是使用Bootstrap（版本4）的新手，我的任务是为此表单form layout写代码，但我找不到正确的方法。你能帮我吗。谢谢。

Answer 1

您可以执行以下操作...

<div class="container p-3">
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <input type="text" class="form-control mb-2" placeholder="Name">
      <input type="email" class="form-control mb-2" placeholder="Email">
      <input type="phone" class="form-control mb-2" placeholder="Phone">
    </div>
    <div class="col-sm-12 col-md-6">
      <textarea class="form-control" placeholder="Text Area" rows="4"></textarea>
    </div>
  </div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-3">
  <div class="row">
    <div class="col-sm-6">
      <input type="text" class="form-control mb-2" placeholder="Name">
      <input type="email" class="form-control mb-2" placeholder="Email">
      <input type="phone" class="form-control mb-2" placeholder="Phone">
    </div>
    <div class="col-sm-6">
      <textarea class="form-control" placeholder="Text Area" rows="4"></textarea>
    </div>
  </div>
</div>