css - Bootstrap 在移动设备上留下太多偏移量

Question

我已经尝试使用 Bootstrap 3.3.6 构建一个页面，它在笔记本电脑上运行良好，但是当我在 Chrome 和其他浏览器上模拟移动查看时，我得到了太多的偏移量，如下图所示:

当前结果:

预期结果:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
        <div class="col-md-3">
           Some content...
        </div>
    </div>
</div>

我也试过<div class="container">但它仍然是一样的。和元:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

Bootstrap 的要点在于它具有响应性，但您需要遵循他们的约定才能做到这一点。 col-md-x 适用于“中等”屏幕。当您定位到移动设备时，您需要使用 col-xs-x。所以带有 class="col-xs-6 col-md-3" 的 div 意味着在手机屏幕上，div 将是 6 列，而在桌面屏幕上它将是 3 列。

我建议您阅读文档，http://getbootstrap.com/css/

相关部分:

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.