Question

在哪里可以找到有关PC或平板电脑上Bootstrap行为差异以及智能手机行为的信息？我搜索了Bootstrap特定信息但找不到它。

我们这个问题：我正在开发一个使用大量动态数据并随后处理数据的网站。在PC和平板电脑上，一切都运行正常，但在智能手机上并没有。当我调试代码时，显然总是出错。通常情况下，有太多的类Row和col-xx-nn在同一个div上。

这总是适用于PC和平板电脑，但在智能手机上会导致文本字段，按钮和选择停止运行。

我知道我将不得不调试更多但仍然是：为什么这个“有缺陷”的代码在PC和平板电脑上运行，但在智能手机上没有，即使在所有三个平台上我都使用相同的浏览器（例如Google Chrome）？对于智能手机而言，操作系统的类型没有区别，浏览器也没有区别（在IOS上试用了具有相同结果的Safari）。

Answer 1

结帐：https://getbootstrap.com/docs/3.3/css/#grid-options它解释了网格系统的大小取决于视口[即col-xs是否适用于移动设备（＆lt; 768px），col-sm适用于平板电脑（＆gt; = 768px，＆lt; 768px）。 = 992px），col-md用于桌面（＆gt; = 992px，＆lt; = 1200px），col-lg用于大型设备（＆gt; = 1200px）]

在使用bootstraps网格系统时使用容器，我在下面有一个小例子，你可以扔进你的身体标签：

<div class="container">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 1</h2>
        <p class="callouts-desc">
            Title 1 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 2</h2>
        <p class="callouts-desc">
            Title 2 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 3</h2>
        <p class="callouts-desc">
            Title 3 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 4</h2>
        <p class="callouts-desc">
            Title 4 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 5</h2>
        <p class="callouts-desc">
            Title 5 paragraph, blah blah blah.
        </p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <h2>Title 6</h2>
        <p class="callouts-desc">
            Title 6 paragraph, blah blah blah.
        </p>
    </div>
</div>

希望这有帮助！

Bootstrap和智能手机

1 个答案: