html - 如何设计带有输入和文本区域的 Bootstrap 表单？

Question

如何使用 bootstrap4 设计附加图像？我是 Web 开发的新手。

Answer 1

以这样的事情作为起点怎么样？

HTML

<div class="container main-form">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 custom-col">
      <div class="p-5">
        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
          <div class="row justify-content-center align-items-center">
            <button class="btn btn-primary" type="submit">Button</button>
          </div>
        </form>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 custom-col">
      <div class="p-5">
        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
          <div class="row justify-content-center align-items-center">
            <button class="btn btn-primary" type="submit">Button</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS

.main-form {
  margin-top: 30px;
}

.custom-col {
  border : 2px solid #ccc;
  background-color : #eee;
}

笔链接

https://codepen.io/anjanasilva/pen/dgMggQ

希望对您有所帮助。谢谢。