Question

我已阅读其他帖子，并确保我的index.html与我的css，fonts和js文件夹位于同一文件夹中，但仍然无法正常呈现。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="container-fluid">
   <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
   </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Answer 1

清除浏览器缓存。当你走在正确的道路上时，大多数人都会在Getbootstrap.com上开始阅读。

Answer 2

所以Bootstrap不会在他们的页面上告诉你，但每个单元格的阴影不是默认功能。如果使用chrome检查元素，您将看到另外的css规则。所以你就是这样做的：

1）在索引html中将类从“row”更改为“row show-grid”。

2）在css样式表中创建以下规则：

.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}

3）运行你的代码

Answer 3

使用Bootstrap CDN Get Bootstrap

正确安装引导程序

Bootstrap示例堆叠到水平不起作用

3 个答案: