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

Posted 2023-03-05

技术标签:

【中文标题】引导网格对齐不准确，不会响应 .css 文件【英文标题】：Bootstrap grid aligning inaccurately and won't respond to .css file 【发布时间】：2021-12-18 07:31:48 【问题描述】：

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

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

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

Bootstrap grid example screenshot	Bootstrap grid that my code outputs screenshot

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

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

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

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

提前感谢各位有任何意见或建议的人！

【问题讨论】：

【参考方案1】：

您的代码似乎运行良好。问题应该是链接标签，正确设置路径。

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

【讨论】：

以上是关于引导网格对齐不准确，不会响应 .css 文件的主要内容，如果未能解决你的问题，请参考以下文章

如何将 CSS 网格内的弹性项目与其网格线对齐？