【问题标题】:Bootstrap form layout , 2-column [duplicate]Bootstrap表单布局,2列[重复]
【发布时间】:2019-11-13 08:58:41
【问题描述】:

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

【问题讨论】:

  • 你是新来的,所以我会为你列出这个。 StackOverflow 不是解决家庭作业问题的地方。你需要先做一些研究和阅读文档,在这种情况下是关于 Bootstrap 布局的,然后带着你尝试的解决方案来 SO。然后,我们协助填写空白。

标签: html css twitter-bootstrap forms bootstrap-4


【解决方案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>

【讨论】:

    猜你喜欢
    • 2014-01-28
    • 1970-01-01
    • 1970-01-01
    • 2016-12-07
    • 2020-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多