使用 Bootstrap 想要做出响应式的两列表单

Posted 2023-03-06

【中文标题】使用 Bootstrap 想要做出响应式的两列表单

【英文标题】：using Bootstrap want to make responsive two columns form

【发布时间】：2019-03-12 20:42:21

【问题描述】：

我在桌面上有一个这样的两列表单

|A|B|
|C|D|
|E|F|

我想在移动设备上使用它

|A|
|B|
|C|
|D|
|E|
|F|

但我明白了

|A|
|C|
|E|
|B|
|D|
|F|

我的代码是这样的：

<div class="row">
    <div class="col-12 col-md-6">
      <input> <!-- A -->
      <input> <!-- C -->
      <input> <!-- D -->
    </div>

    <div class="col-12 col-md-6 ">
      <input> <!-- B -->
      <input> <!-- D -->
      <input> <!-- F -->
    </div>
</div>

请帮忙

【问题讨论】：

我使用 col-sm-12 和 col-md-6

【参考方案1】：

 <div class="row">
    <div class="col-md-12">
        <div class="col-md-6">
            A
        </div>
        <div class="col-md-6">
            B
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-6">
            C
        </div>
        <div class="col-md-6">
            D
        </div>
    </div>
    <div class="col-md-12">
        <div class="col-md-6">
            E
        </div>
        <div class="col-md-6">
            F
        </div>
    </div>
</div>

【讨论】：

这可行，但嵌套的列应该放在另一个 .row

【参考方案2】：

使用您的原始代码，为每个 input 放置一个类，或者为每个 input 放置一个 div

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
  <div class="col-12 col-md-6">
    A
  </div>
  <div class="col-12 col-md-6">
    B
  </div>
  <div class="col-12 col-md-6">
    C
  </div>
  <div class="col-12 col-md-6">
    D
  </div>
  <div class="col-12 col-md-6">
    E
  </div>
  <div class="col-12 col-md-6">
    F
  </div>
</div>