div 的堆叠，当他们不应该使用引导程序时

可能是一个非常简单的解决方案，但我开始与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>

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

在Bootstrap Grid System

阅读更多关于断点的信息

在搜索了一点困难之后，这是一个简单的修复。只需要在URL中包含http，加载Bootstrap和JQuery文件，因为我从本地文件(我的计算机)加载我的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加载的所有文件执行此操作。这里是我找到的解释这个问题的帖子的链接。如何使用Bootstrap CDN?希望这对你有帮助!

相关内容

最新更新

热门标签：