Bootstrap 响应式网格不适用于 mobileangularui

Question

我正在尝试 bootstrap 中的响应式网格。我已经在 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 的屏幕尺寸上，它应该显示一个 table 1 列和 4 行
在 iPad 的屏幕尺寸上它应该显示一个 table 2 列和 2 行。

然而，两者的结果是一样的：

iPad:

iPhone:

桌面浏览器：

如何实现这种行为？

Answer 1

将此 link 添加到您的 head 标签中

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

Answer 2

经过大量不同排列组合的测试后，我们得出的结论是 sm 屏幕尺寸被忽略了。可能是 bug in mobile-angular-ui？

响应能力适用于 xs 和 md 屏幕尺寸。当我连续增加屏幕尺寸时，响应速度从 xs 跳到 md。

因此，我根据我的要求 ui 的要求在移动设备中使用默认屏幕尺寸-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>

Bootstrap 响应式网格不适用于 mobileangularui

Bootstrap responsive grid not working with mobileangularui

twitter-bootstrap

responsive-design

mobile-angular-ui