Question

我试图为此找到一个解决方案，但一直未能找到。

我有一个设置，其中三个输入字段和一个提交按钮在大屏幕上彼此相邻显示，但是它们被包裹在<div class="col-sm">中以便在移动设备上垂直堆叠。但是，我需要在小屏幕上的提交按钮之前显示一个复选框，但是在大屏幕上，将它显示在输入字段下面是很好的。

            <form method="post">
              <div class="row">
                <div class="col-sm">
                  <input id="email" name="email" type="text" class="required email form-control form-rounded" placeholder="Email">
                </div>
                <div class="col-sm">
                  <input type="text" class="form-control form-rounded" placeholder="Number">
                </div>
                <div class="col">
                  <input name="comp" id="comp" type="text" class="form-control form-rounded" placeholder="Company">
                </div>                  
                <div class="col-sm">
                  <input type="submit" name="submit" id="subscribesubmit" class="button btn-block" value="Sign up">
                </div>
              </div>
              <div id="contactconsent" class="d-flex justify-content-center margin-top-small">
                  <input type="checkbox" name="consent" id="contactconsentcheck">
                  <label class="checkbox-inline" for="contactconsentcheck">
                    Lorem ipsum dolor sit amet
                  </label>
                </div>
            </form>

我曾经在媒体查询中操纵边距，但感觉这是一个糟糕的解决方案。有什么建议吗？

由于

Answer 1

尝试这样的事情。请务必单击“整页”按钮，然后单击“运行代码段”，以便可以调整演示窗口的大小。

.my-form {
  display: flex;
}

input {
  margin: 0;
}

.text-fields {
  flex-direction: row;
}

.text {
  margin-bottom: 4px;
  width: 200px;
  height: 22px;
}

.submit-btn {
  margin-left: 10px;
  width: 80px;
  height: 30px;
}

@media screen and (max-width: 767px) {
  .my-form {
    flex-direction: column;
  }
  
  .text-fields {
    display: flex;
    flex-direction: column;
  }

  .submit-btn {
      margin-left: 0;
  }
}

<form class="my-form">
  <div class="inputs">
    <div class="text-fields">
      <input class="text" type="text">
      <input class="text" type="text">
      <input class="text" type="text">
    </div>
    <input type="checkbox">
  </div>
  <input class="submit-btn" type="submit" value="Submit">
</form>

在小屏幕上提交按钮之前出现的Bootstrap复选框

1 个答案: