Question

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

<!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>

Answer 1

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

在Bootstrap Grid System

上详细了解他们的断点

Answer 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?希望这会有所帮助！

当他们没有被假定为具有Bootstrap时，Div的堆叠

2 个答案: