引导CSS网格

Question

我正在尝试设置一个简单的示例，使用 bootstrap css 的网格功能，并有一个 index.html 文件，该文件的容器有两行，每行两列。但我只看到行而不是列。

我已经遵循了 freeCodeCamp 的教程 Bootstrap CSS Framework (https://www.youtube.com/watch?v=-qfEOE4vtxE&ab_channel=freeCodeCamp.org) 并遵循了所有步骤。

但是，当我使用 Visual Studio Code 的实时服务器功能检查 index.html 时，我只看到结果行，而不是列，请参阅。

我已经使用 npm 安装了 bootstrap css，安装了 popper 和 jquery。谁能帮我吗？预先感谢您。

我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link 
        rel="stylesheet" 
        href="node_modules/bootstrap/dist/css/bootstrap.css"
    \>
    <style>
        [class*="col"] {
            flex: 1;
            padding: 1rem;
            background-color: #33b2e5;
            border: 2px solid #fff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm">Col 1</div>
            <div class="col-sm">Col 2</div>
            <!-- <div class="col">Col 3</div> -->
            <!-- <div class="col">Col 4</div> -->
        </div>
        <div class="row">
            <div class="col">Col 3</div>
            <div class="col">Col 4</div>
        </div>
    </div>
    <!-- <h1>Hello npm world</h1> -->
    <!-- <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> -->
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/@popperjs/core/dist/umd/popper.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Answer 1

我已经在测试项目目录中使用 npm 安装了 bootstrap 并使用了你的代码，它可以工作（我看到行和列）。

您再检查一下您的项目目录中是否存在类似内容的package.json文件？

重要的是要有依赖 -> bootstrap

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.3.2"
  }
}

引导CSS网格

问题描述投票：0回答：1

1个回答

最新问题

引导CSS网格

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1