html - Bootstrap 表单布局,2 列

标签 html css twitter-bootstrap forms bootstrap-4

<分区>

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

最佳答案

你可以这样做......

<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>

关于html - Bootstrap 表单布局,2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56857081/

上一篇:html - 如何在contenteditable区域编辑文本前后添加空格

下一篇:c# - 将 Bootstrap 连接到 ASP.NET _Layout.cshtml 文件

相关文章:

html - 面对 IE8 和 Firefox 复选框文本的对齐问题

css - 这是怎么做到的?向下滚动 = 流畅的幻灯片(在 Google Cardboard 网站上)

html - 在 xs 设备中重新排列 div 时出现问题

css - 为什么我的 Bootstrap 列类堆叠在一起,而不是彼此并排坐在一起?

html - list-style-image 没有出现在与列表项相同的级别?

css - 元素前伪的 mouseout 过渡宽度

html - 重新排序网格项

javascript - 垂直对齐 div 中的文本 vertical-align 不起作用

twitter-bootstrap - 如何使下拉按钮中的文本居中

html - Bootstrap .center-block 没有按预期工作