时间戳

首页 > 解决方案 > 引导网格对齐不准确，不会响应 .css 文件

html - 引导网格对齐不准确，不会响应 .css 文件

问题描述

我正在跟随 Jump Start Bootstrap 中的练习（下载链接https://learn.vccs.edu/courses/406438/files/108188236/preview）

在第 2 章中，我们正在创建一个网格系统。我已经输入了 index.html 和 style.css 文件的代码来格式化网格，如书中所示。

网格中的列需要垂直和水平对齐，但是，它们只是垂直对齐。列 div 也不响应应该在大小和颜色上格式化它们的 style.css 文件。

Bootstrap 网格示例截图 我的代码输出
屏幕截图的引导网格
在此处输入图像描述 在此处输入图像描述

我已经检查了我的代码几次，并将其与书中的代码进行了比较（我在[第 02 章 index.html 文件]上方添加了下载链接），我找不到任何问题。

这是我用于 html 和 css 文件的代码： https ://pastebin.com/MQWnJXvT

如果有人可以查看并提出任何建议，或者只是设法发现并指出我错过的错误，我将不胜感激。我正在用这个挠头，可能会在剩下的晚上继续做。

我能想到的唯一问题是我在列 div 中分配了错误的类，或者将<link href="css/style.css" rel="stylesheet">行放在错误的部分中。

我提前感谢大家谁有任何意见或建议！

标签： htmlcsstwitter-bootstrapalignment

解决方案

您的代码似乎工作正常。问题应该是链接标签，正确设置路径。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    .col1 {
      background: #5C7080;
    }
    
    .col2 {
      background: #6BC0FF;
    }
    
    .col3 {
      background: #E8AA4C;
    }
    
    .col4 {
      background: #FF384E;
    }
  </style>

  <title>Hello, world!</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col1">
        <h4>Column 1</h4>
      </div>
      <div class="col-xs-12 col-sm-6 col2">
        <h4>Column 2</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col3">
        <h4>Column 3</h4>
      </div>
      <div class="col-xs-12 col-sm-6 col4">
        <h4>Column 4</h4>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

推荐阅读