Question

我正在开发一个登录/注册页面，但我需要有关列的帮助。该页面目前在桌面1920x180上显示如下：http://prntscr.com/cl4ms8

我在两个表单上使用<div class="col-xs-6">，因此它们在页面上均匀分割。我将如何制作它以便在所有设备上响应，因为它在iPhone 6上看起来像这样：http://prntscr.com/cl4ndb

Answer 1

使用bootstap的课程col-lg-6 col-md-6 col-sm-12 col-xs-12进行登录和注册的主要部分，您可以访问网站http://getbootstrap.com/css/#grid和http://getbootstrap.com/css/#forms

示例：

<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>

Answer 2

Bootstrap附带4层网格，其前缀为;

.col-xs - ，（＆<768px）
.col-sm-，（≥768px）
.col-md-，（≥992px）
.col-lg-，（≥1200px）

如果您应用了列类“col-xs-6”，那么您所说的是从0px到767px，我希望此列为容器宽度的50％。除非您为下一个网格层添加另一个类，否则它将继续在更宽屏幕上占父级的50％。因此，除非您添加另一个类，否则不仅高达768px而且超出。

你的问题是大多数手机都太窄而不能为此目的显示两列。因此，将"col-xs-6"更改为"col-xs-12"。并添加“col-sm-6”。

<div class="col-xs-12 col-sm-6">

这意味着从768px起，列数将达到50％。

布局看起来破碎的原因可能是因为您的输入的宽度或最小宽度大于容器的50％宽度，因此比它们嵌套的列网格宽。

Answer 3

使用引导网格：http://v4-alpha.getbootstrap.com/layout/grid/（这是v4文档，但v3（标准）的工作方式相同，v4文档更好）。另请参阅w3schools的教程：http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 4

具有col-xx-n类的元素需要是具有类container-fluid的元素的子元素或后代。

所以，这将是响应：

<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>

如何使Bootstrap列在所有设备上响应？

4 个答案: