我的引导程序坏了吗？网格系统无法正常工作答案

【问题标题】：Is My Bootstrap Broken? Grid-System doesn't Work Properly我的引导程序坏了吗？网格系统无法正常工作
【发布时间】：2016-12-08 18:37:29
【问题描述】：

我在这里的第一个问题也是一个非常简单的问题。所以我在这里得到了一个小脚本，它必须创建具有动态内容的行。它将在一行中附加 4 个框（列），然后将该行附加到容器中。如果它完成了该过程，它会将容器附加到主容器。现在我看到，在 4K 显示器上，每一列都是 100% 的行宽，就像在移动设备上一样。

这是我的脚本输出的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="magazin-widget">
  <div class="container">
    <div class="row">
      <div class="col-md-3">Dynamic Box 1</div>
      <div class="col-md-3">Dynamic Box 2</div>
      <div class="col-md-3">Dynamic Box 3</div>
      <div class="col-md-3">Dynamic Box 4</div>
    </div>
    <div class="row">
      <div class="col-md-3">Dynamic Box 5</div>
      <div class="col-md-3">Dynamic Box 6</div>
      <div class="col-md-3">Dynamic Box 7</div>
      <div class="col-md-3">Dynamic Box 8</div>
    </div>
  </div>
</div>

我没有在这个标记中看到错误...也许它是我的引导程序？因为据我所知应该是这样的：http://getbootstrap.com/css/#grid-example-basic

编辑：

控制台很干净，只有日志：

JQMIGRATE: Migrate is installed, version 1.4.1
[cycle2] --c2 init--

产生的输出：

【问题讨论】：

有没有对#magazin-widget应用css规则，比如width或者别的什么？
用你得到的屏幕截图和相应的 !console 错误（如果有）更新你的帖子
我会做，但 div 尚未应用任何规则
不应使用图像，而应使用 sn-p。我已经为帖子添加了一个编辑以供审核。
周围没有 4K 屏幕，但在 Chrome 开发工具响应模式下测试您的 sn-p 并没有显示在 1,000 到 6,000 像素之间的任何随机模拟宽度下的行为......你是确保您没有弄乱任何可能使这看起来很奇怪的浏览器设置（缩放级别，等等）只为您 ...？

标签： javascript css twitter-bootstrap

【解决方案1】：

代码对我来说很好 - 你在看什么屏幕宽度？

col-md-xx 仅影响 992 像素或更宽的视口 - 对于较小的设备，您可能希望使用 col-sm-xx 或 col-xs-xx。

请参阅here 了解更多信息。

【讨论】：

嗯，我的视口是 4K，所以我认为这不是问题所在。我唯一能想象的是容器的宽度小于 992 像素，但我使用的是引导程序中的默认 .container ......我想它可能是修改后的引导程序，因为还有其他人在那里工作，我会四处打听。对我来说，这是唯一有意义的事情。
你有什么地方可以让我看到你的代码工作，这样我们就可以破解开发工具吗？

【解决方案2】：

当我将 sn-p 扩展到全页视图时，我看到了这项工作。现在在精简视图中，因为引导程序是响应式的，所以一切都会堆叠。我建议你使用col-sm-3 之类的东西来定位较低的视口宽度。

【讨论】：