当不应该使用 Bootstrap 时，Div 的堆叠答案

【问题标题】：Div's Stacking When They're Not Supposed To w/ Bootstrap当不应该使用 Bootstrap 时，Div 的堆叠
【发布时间】：2015-10-24 08:14:03
【问题描述】：

可能是一个非常简单的解决方案，但我开始使用 Bootstrap，但我无法弄清楚为什么每个 div 是堆叠而不是继承其关联的 col 宽度。（例如，.col-md-1 的宽度应该小于 .col-md-6）还包括一个 JS Fiddle。`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <title></title>
  <style type="text/css">
    .row > div {
    background-color: red;
    border: 1px solid white;
    } 
  </style>
</head>
<body>
<div class="container">
  <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 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>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

JS 小提琴在哪里？
jsfiddle.net/ew9L3z35
根据您设置的列，它们占据不同数量的列，但它们共享相同的断点，因为它们都是 MD。在 992px 以上查看您自己的 jsfiddle。
我提交的语法是否正确？当我在 jsfiddle 上扩展视口时，它们确实占据了不同数量的列，但是在我的电脑上它们仍然堆叠。不知道为什么。
不，上面和 jsfiddle 中的语法只是默认类，带有一些会改变任何行为的样式。

标签： twitter-bootstrap

【解决方案1】：

它不像你说的那样堆叠，但我扩大了我的屏幕。但是请记住，它们将在指定的断点处堆叠。所以你的例子是使用.col-md-* 的容器宽度为960px。如果您的输出视图很小，它可能会在小提琴或 codepen 上具有欺骗性。

在Bootstrap Grid System上阅读更多关于他们的断点的信息

【讨论】：

【解决方案2】：

经过一番努力搜索后，这是一个简单的修复。只需在加载 Bootstrap 和 JQuery 文件的 URL 中包含 http，因为我正在从本地文件（我的计算机）加载我的 html。

代替：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

用途：

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

您对从 CDN 加载的所有文件执行此操作。这是我找到的解释问题的帖子的链接。 How to use Bootstrap CDN?希望对您有所帮助！

【讨论】：