Bootstrap在移动设备上留下了太多的偏差

Question

我尝试使用Bootstrap 3.3.6构建一个页面并且它在笔记本电脑上工作正常但是当我在Chrome和其他浏览器上模拟移动查看时，我得到了太多的偏移量，如下图所示：

当前结果：

预期结果：

Template.task.events({
  'click .delete': function () {
    Meteor.call('deleteTask', this._id, function(err, result){
      if (err){
        // an error was thrown
      } else {
        // everything worked!
      }
    })
  }
});

我也试过了<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">

Answer 1

Bootstrap的重点在于它的响应能力，但你需要遵循他们的惯例才能做到这一点。 col-md-x适用于＆＃34; medium＆＃34;屏幕。当您定位移动广告时，您需要使用col-xs-x。所以带class="col-xs-6 col-md-3"的div表示在手机屏幕上，div为6列，在桌面屏幕上为3列。

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

相关部分：

  

Bootstrap 3网格系统有四层：xs（手机），sm（平板电脑），md（桌面）和lg（大型桌面）。您几乎可以使用这些类的任意组合来创建更加动态和灵活的布局。