Windows 现代应用程序中的 twitter 引导程序

Question

我正在实现一个简单的跨平台应用。我至少需要 win8 和 Android 兼容性。我决定为此使用 PhoneGap 和 twitter 引导程序。

当我尝试使用引导网格实现流畅的 UI 时，它无法在 win8 中正确呈现。例如，当我尝试以下示例网格 html 时：

  <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>

我在浏览器中获得了正确的布局，但在 win8 现代应用程序模拟器中，所有列总是拉伸到整个屏幕。不管屏幕多宽。

有没有办法解决这个问题？还是bootstrap与win8不兼容？那么有什么替代方案呢？我需要一些可以在 win8 和移动 html5 应用程序中重复使用的东西。

Answer 1

在 android 上看起来和你预期的一样好？

我问是因为我不知道你期望什么，当屏幕分辨率小于 992 像素时，使用 col-md-* 会拉伸

这里是网格系统：http://getbootstrap.com/css/#grid-options 也许你想使用 col-sm-* ？

类似这样的：

<div class="row">
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
    <div class="col-sm-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-sm-8">.col-md-8</div>
    <div class="col-sm-4">.col-md-4</div>
</div>