0

我正在实现一个简单的跨平台应用程序。我至少需要 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 应用程序中重复使用的东西。

4

1 回答 1

0

在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>
于 2015-04-09T14:42:52.003 回答