Html 在移动设备上从水平形状到垂直形状

我在本页底部有一个表格：

当你在iPhone4、5、6等屏幕上查看表单时，按钮完全是乱七八糟的。 我想让它具有响应性，所以当你在手机上看到页面时，表单将变得垂直而不是水平

但说实话，我真的不知道我怎么能做到这一点？有人有什么建议吗

---

致以最诚挚的问候

您应该查看样式表的媒体查询。

什么是媒体查询

媒体查询是CSS3中引入的一种CSS技术。 只有在特定条件为真时，它才使用@media规则包含CSS属性块

范例

如果浏览器窗口小于500px，背景颜色将变为浅蓝色：

使用：

---

只需应用行逻辑：

<form class="row">
  <div class="form-group col-sm-4">
    <input class="form-control" name="name" type="text" />
  </div>
  <div class="form-group col-sm-4">
    <input class="form-control" name="email" type="email" />
  </div>
  <button class="btn col-sm-4">Ja - tak</button>
</form>

注释

---

确保输入宽度：100%。您可以通过将-sm更改为其他断点来调整断点：-xs/-md/-lg

插入此断点，然后播放此断点：

@所有媒体和最大宽度：800px//800px，适用于平板电脑和手机。 { .广泛报名 { 显示：块； 浮动：无； 宽度：100%； } } 只有一个变化

@media screen (max-width: 480px){
  .signup-wide #signupForm{
    flex-direction: column;
    align-items: center;
  }
}

下面是一个最小的完整示例。 在这种情况下，窗体将在屏幕宽度480px以下垂直

报名表{ 显示器：flex； 对齐项目：居中； 证明内容：中心； } @媒体屏幕和最大宽度：480px{ 报名表{ 弯曲方向：立柱； } }

---

我看不出OP在使用flexbox..注册宽表单{display:-webkit flex；display:-ms flexbox；display:flex；-webkit justify content:space-between；-ms flex pack:justify；justify content:space-between；}这是从他的代码中得到的一个非常简单的版本，源于引导文档。如果您想要更具体的答案，请分享您迄今为止所做的工作的代码。以水平形式。表格组可以替换。Row非常感谢您的回答。这个防守几乎满足了我的要求。有一件事我不明白。.signup-wide-form.form组设置为100%，但它只填充了大约85%。这怎么可能？刚刚用截图更新了我的问题，非常感谢你的回答。我刚刚试过你的代码，但当我运行代码时，表单只有30%左右，即使代码显示为100%。你能知道为什么会这样吗？

<form class="row">
  <div class="form-group col-sm-4">
    <input class="form-control" name="name" type="text" />
  </div>
  <div class="form-group col-sm-4">
    <input class="form-control" name="email" type="email" />
  </div>
  <button class="btn col-sm-4">Ja - tak</button>
</form>

@media screen (max-width: 480px){
  .signup-wide #signupForm{
    flex-direction: column;
    align-items: center;
  }
}