Bootstrap 响应式网格不适用于 mobileangularui答案

【问题标题】：Bootstrap responsive grid not working with mobileangularuiBootstrap 响应式网格不适用于 mobileangularui
【发布时间】：2015-11-20 19:12:40
【问题描述】：

我正在尝试在引导程序中使用响应式网格。我在 Angular JS、mobile-angular-ui 和 phone gap 中创建了一个项目。

在其中一个 html 页面中，我有以下代码。

<div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6">Jane Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">House 10, Street 8, City.</div>
      <div class="col-xs-12 col-sm-6 col-md-6">John Doe</div>
      <div class="col-xs-12 col-sm-6 col-md-6">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>

我在 320x480 (iPhone 4) 和 768x1024 (iPad) 的屏幕尺寸上进行了尝试。我想要发生的是：

在 iphone 的屏幕尺寸上，应该有一个 1 列 4 行的表格
在 iPad 的屏幕尺寸上，它应该显示一个包含 2 列和 2 行的表格。

但是，两者的结果是一样的：

iPad：

iPhone：

桌面浏览器：

如何实现这种行为？

【问题讨论】：

您是否在文档的头部包含了viewport tag？
是的，<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui, width=device-width"/>。
user-scalable=no 禁用响应式样式，所以...
我刚刚将其更改为yes，但不幸的是结果相同。
<meta name="viewport" content="width=device-width, initial-scale=1" /> 是推荐的，如上所述。您尝试限制视口是否有原因？

标签： twitter-bootstrap responsive-design mobile-angular-ui

【解决方案1】：

在你的 head 标签中添加这个链接

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

【讨论】：

【解决方案2】：

在对不同的排列和组合进行大量测试后，我们得出结论，sm 屏幕尺寸正在被忽略。可能是 mobile-angular-ui 中的bug？

响应能力适用于 xs 和 md 屏幕尺寸。随着屏幕尺寸的不断增加，响应速度从xs 跃升至md。

所以，我 changed 根据我的要求在 mobile-angular-ui 中使用默认屏幕尺寸，并且只使用了 xs、md 和 lg 尺寸类。

<div class="row">
    <div class="col-xs-12 col-md-6 col-lg-3">Jane Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">House 10, Street 8, City.</div>
    <div class="col-xs-12 col-md-6 col-lg-3">John Doe</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Apartment 10A, Blding XYZ, Block 10, City.</div>
</div>

【讨论】：