Question

我在使用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>

Answer 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个指定的弹性项目（弹性容器的子级，即.flex1，.flex2，.flex3，.flex4）将重新排序为：


第3名现在是第1名，

1st现在是第2名，

和2nd现在是第3个


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

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

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

使用Booststrap输入表单中的顺序

1 个答案:

解

段