Question

我有一个包含以下2列布局的表单。它在桌面浏览器上显示良好。对于此示例，每个字母/数字组合是一个输入字段：

col-md-6    col-md-6
   A1   |      B1
   A2   |      B2

   A3   |      B3
   A4   |      B4
   A5   |

   A6   |      B6

我按行分隔输入字段。例如，输入字段A1和B1都在一行中。 A3，B3，A4，B4和A5也在一行中。我这样做是为了让我不必测量并在B3和B4上施加高度以保持列之间的间距对齐。

但是，当我调整到移动浏览器时，我希望所有B值都属于A值，如下所示：

我已经看过几个涉及push and pull的不同方法，但我似乎无法找到仅支持CSS的解决方案。页面上有大约80个输入字段。我也试图测量高度，但事实证明这是一种笨重的方式，因为字段经常变化，我需要在众多浏览器上重新测试显示器。

任何聪明的解决方案？

更新：

这是一个简洁的两行工作示例，如评论中所要求的那样：

<div class="row">
     <div class="col-md-6 form-group-primary">
        <form:input path="firstName" type="text" class="form-control"/>
     </div>
     <div class="col-md-6 form-group-container-co">
        <form:input path="coFirstName" type="text" class="form-control"/>
     </div>
</div>
<div class="row">
     <div class="col-md-6 form-group-primary">
         <form:input path="lastName" type="text" class="form-control"/>
     </div>
     <div class="col-md-6 form-group-container-co">
         <form:input path="coLastName" type="text" class="form-control"/>
     </div>
</div>

Answer 1

＆＃13;

.lg-spacer {
  visibility: hidden;
}
@media (max-width: 767px) {
  .lg-spacer {
    display: none;
  }
  
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a1" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a2" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a3" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a4" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="a5" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="a6" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b1" />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="b2" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b3" />
      </div>
      <div class="form-group-primary">
        <input path="firstName" type="text" class="form-control" placeholder="b4" />
      </div>
      <div class="form-group-primary lg-spacer">
        <input type="text" class="form-control" disabled />
      </div>
      <div class="form-group-primary">
        <input path="lastName" type="text" class="form-control" placeholder="b6" />
      </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如果您无法更改标记（它是由某些插件生成的等等），则可以使用flexbox完成。

在移动广告

1 个答案: