Html 如何使引导列在所有设备上响应？

我目前正在开发一个登录/注册页面，但我需要有关列的帮助。当前桌面1920x180上的页面如下所示：

---

我在这两个表单上都使用了

，因此它们在页面上是均匀分布的。我将如何使它在所有设备上都能响应当前iPhone 6上的情况：

使用引导网格：（这是v4文档，但v3（标准）工作原理相同，v4文档更好）。另请参见w3schools的教程：

使用bootstap的类

col-lg-6 col-md-6 col-sm-12 col-xs-12

，了解登录和注册的主要部分，您可以参考站点和

示例：

 <div class="container-fluid">///or container   
         <div id="login" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            ///your login form 
            </div>
        <div id="registration" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            ///your registration form 
            </div>
</div>

///或容器
///您的登录表单
///你的登记表

具有

col-xx-n

类的元素必须是具有

容器流体类的元素的子元素或子元素

因此，这将是响应性的：

<div class="container-fluid">
  <div class="col-md-4">This div takes up 1/3 of the available width on a desktop</div>
  <div class="col-md-8">This div takes up 2/3 of the available width on a desktop</div>
</div>


此分区占据桌面上可用宽度的1/3
此分区占用桌面上可用宽度的2/3
Bootstrap附带4层网格，其类前缀为


.col xs-，（我们需要代码来帮助您解决问题，请参阅。嗨，扎克，引导程序正在做它应该做的事情。基本上，您所说的是。我希望这个div在大于xs（0px）的所有设备上占据父元素的50%。我建议您将类更改为：
，或者如果这还不够
col-md-6
（我希望此元素在比sm/md更大的设备上宽度为50%），希望您发现此选项有用。
<div class="col-xs-12 col-sm-6">