Question

我正在实施一个简单的跨平台应用。我至少需要win8和Android兼容性。我决定使用PhoneGap和twitter bootstrap。

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

＆＃13;

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

＆＃13;

我在浏览器中获得了正确的布局，但在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>

Windows现代应用程序中的twitter bootstrap

1 个答案: