使用 bootstrap 显示 html 输入字段

Question

我们可以在同一个表单的 Bootstrap 类的帮助下，在宽屏上有两个输入字段，在小屏幕上有一个输入字段吗？我怎样才能使用引导程序.

我的期望是在不同的屏幕上显示不同类型的输入字段

Answer 1

是的，您绝对可以在 Bootstrap 中设计一个表单，根据屏幕尺寸显示不同的输入字段布局。 Bootstrap 提供了一个响应式网格系统，允许您使用 col-*、col-md-*、col-lg-*

等类指定元素在不同屏幕尺寸上的显示方式

您可以从这个简单的示例开始。如果你想使用特定的屏幕尺寸，你需要使用@media query

<div class="container">
  <form>
    <div class="row">
      <div class="col-12 col-md-6 mb-3"> 
        <label for="inputField1" class="form-label">Field 1</label>
        <input type="text" class="form-control" id="inputField1" placeholder="Enter Field 1">
      </div>
      <div class="col-12 col-md-6 mb-3"> 
        <label for="inputField2" class="form-label">Field 2</label>
        <input type="text" class="form-control" id="inputField2" placeholder="Enter Field 2">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>