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的屏幕尺寸上，它应该显示一个包含1列和4行的表
• 在iPad的屏幕尺寸上，它应该显示一个包含2列和2行的表格。

然而，两者的结果相同：

ipad公司：

iPhone：

桌面浏览器：

我如何实现这种行为？

Answer 1

在标题中添加此链接

   <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屏幕大小被忽略了。移动角度ui中可能是bug？

响应能力适用于xs和md屏幕尺寸。随着我逐渐增加屏幕尺寸，响应速度从xs跳到md。

因此，我changed根据我的要求，在mobile-angular-ui中使用默认屏幕尺寸，并仅使用xs，md和lg尺寸类。< / p>

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