使用 Bootstrap 在表单中输入顺序答案

【问题标题】：Inputs order in the form with Booststrap使用 Bootstrap 在表单中输入顺序
【发布时间】：2017-01-22 21:20:48
【问题描述】：

我在使用 Bootstrap 在移动视图的表单中设置正确的输入顺序时遇到问题。我已经问过类似的问题，并得到了一些提示，并且被告知很容易。我尝试了很多东西，但我只是不知道如何获得所需的结果。

请看一下 jsfiddle。

https://jsfiddle.net/nitadesign/y79LwL9x/8/

我希望占位符（17 - 错误文本区域）的输入位于（20 - 按钮）的顶部。

视觉图：

HTML

<div class="row">
    <div class="col-md-3">
        <input name="textinput" type="text" placeholder="1" class="form-control" />
        <input name="textinput" type="text" placeholder="2" class="form-control" />
        <input name="textinput" type="text" placeholder="3" class="form-control" />
        <input name="textinput" type="text" placeholder="4" class="form-control" />
        <input name="textinput" type="text" placeholder="5" class="form-control" />
    </div>

    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                <input name="textinput" type="text" placeholder="6" class="form-control" />
                <input name="textinput" type="text" placeholder="7" class="form-control" />
                <input name="textinput" type="text" placeholder="8" class="form-control" />
                <input name="textinput" type="text" placeholder="9" class="form-control" />
            </div>
            <div class="col-md-6">
                <input name="textinput" type="text" placeholder="10" class="form-control" />
                <input name="textinput" type="text" placeholder="11" class="form-control" />
                <input name="textinput" type="text" placeholder="12" class="form-control" />
                <input name="textinput" type="text" placeholder="13" class="form-control" />
            </div>
        </div>
    </div>


    <div class="col-md-3">
        <input name="textinput" type="text" placeholder="14" class="form-control" />
        <input name="textinput" type="text" placeholder="15" class="form-control" />
        <input name="textinput" type="text" placeholder="16" class="form-control" />
        <input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
    </div>

    <div class="col-md-9">
        <div class="row">
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="18" class="form-control" />
            </div>
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="19" class="form-control" />
            </div>
            <div class="col-md-4">
                <input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

...得到了一些提示，并被告知很容易。

我和你在一起，这并不容易。如果它是那么容易，你会得到一个有效的答案。

解决方案

您可以在输入 17 到 20 上使用 flexbox，并使用 flexbox 属性 order。

  .flex { display: flex; flex-direction: column; }
  .flex1 { order:3; }
  .flex2 { order:1; }
  .flex3 { order:2; }
  .flex4 { order:4; }
  @media screen and (min-width:1000px) {
    .flex { display: inline; }
  }

这些规则集基本上是在说：

4 个指定的 flex 项（flex 容器的子项，即 .flex1、.flex2、.flex3、.flex4）将重新排序为：

现在是第 3 个，

第一现在是第二，

第二个现在是第三个

当视口宽度超过 1000px 时，flex 容器（即 .flex）将是无害的内联元素。

为了在不破坏布局的情况下使样式正常工作，必须对 HTML 进行一些更改：

将 <span class='flex'> 包裹在输入 17 到 20 周围。
为输入 17 到 20 分配了类 .flex1, .flex2, .flex3, .flex4。
最后 3 个 div 类从 .col-md-4 更改为 .col-md-3。
删除了包裹在输入 18 到 20 周围的 .col-md-9 和 .row。
将输入 17 移到 .flex 内，并在其周围包裹一个 <div class='col-md-3'>。

PLUNKER

片段

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    .flex {
      display: flex;
      flex-direction: column;
    }
    .flex1 {
      order: 3;
    }
    .flex2 {
      order: 1;
    }
    .flex3 {
      order: 2;
    }
    .flex4 {
      order: 4;
    }
    @media screen and (min-width: 1000px) {
      .flex {
        display: inline;
      }
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-md-3">
      <input name="textinput" type="text" placeholder="1" class="form-control" />
      <input name="textinput" type="text" placeholder="2" class="form-control" />
      <input name="textinput" type="text" placeholder="3" class="form-control" />
      <input name="textinput" type="text" placeholder="4" class="form-control" />
      <input name="textinput" type="text" placeholder="5" class="form-control" />
    </div>

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6">
          <input name="textinput" type="text" placeholder="6" class="form-control" />
          <input name="textinput" type="text" placeholder="7" class="form-control" />
          <input name="textinput" type="text" placeholder="8" class="form-control" />
          <input name="textinput" type="text" placeholder="9" class="form-control" />
        </div>
        <div class="col-md-6">
          <input name="textinput" type="text" placeholder="10" class="form-control" />
          <input name="textinput" type="text" placeholder="11" class="form-control" />
          <input name="textinput" type="text" placeholder="12" class="form-control" />
          <input name="textinput" type="text" placeholder="13" class="form-control" />
        </div>
      </div>
    </div>


    <div class="col-md-3">
      <input name="textinput" type="text" placeholder="14" class="form-control" />
      <input name="textinput" type="text" placeholder="15" class="form-control" />
      <input name="textinput" type="text" placeholder="16" class="form-control" />
    </div>

    <span class='flex'>
    <div class="col-md-3 flex1">
      <input name="textinput" type="text" placeholder="17 - Error Text Area" class="form-control" />
    </div>
    <div class="col-md-3 flex2">
      <input name="textinput" type="text" placeholder="18" class="form-control" />
    </div>
    <div class="col-md-3 flex3">
      <input name="textinput" type="text" placeholder="19" class="form-control" />
    </div>
    <div class="col-md-3 flex4">
      <input name="textinput" type="text" placeholder="20 - Button" class="form-control" />
    </div>
</span>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

【讨论】：

感谢您帮助我，这非常令人沮丧。也感谢您的明确解释。这是一个非常有趣的解决方案。
不客气，没有 Bootstrap 会更容易，除非你擅长它。我不是，所以这是一个好习惯。