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

Question

我目前正在开发一个登录/注册页面，但我需要有关列的帮助。该页面当前在桌面 1920x180 上看起来像这样： http ://prntscr.com/cl4ms8

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

原文由 Viole 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Teddy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

• .col-xs- , (<768px)

• .col-sm- , (≥768px)

• .col-md- , (≥992px)

• .col-lg- , (≥1200px)

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

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

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

这意味着从 768px 及以上，列将占 50%。

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

原文由 partypete25 发布，翻译遵循 CC BY-SA 3.0 许可协议