Question

*编辑我认为代码是正确的，所以可能与Chrome有关吗？

我尝试在我的网页上添加一个Bootstrap药丸，但CSS似乎没有起作用。我也试过添加其他组件，但CSS似乎也不适用于它们。

我也尝试过使用＆＃34; cmd shift r＆＃34; （我正在使用mac），但这也没有帮助。

任何人都知道为什么这不起作用以及如何解决它？

我已下载并将静态文件夹放入bootstrap-dist。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home Page</title>
  <meta name="viewport" content="width=device-width, initial scale=1">
  <link type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"
   rel="stylesheet">
   <!-- how to link an icon
   <link rel="shortcut icon"
   href="{{ url_for('static', filename='icon_name.ico') }}">
   -->
</head>
<header>
  <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
  </ul>
</header>
</html>

Answer 1

使用您问题中的HTML代码会产生不同的结果，具体取决于您引用的Bootstrap版本。当您需要使用Bootstrap 3时，您可能正在使用Bootstrap 4.这会导致导航丸显示为您问题中的图像。

HTML（来自问题）

<header>
  <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
  </ul>
</header>

链接到Bootstrap 3

链接到Bootstrap 4

Bootstrap CSS无法使用Flask

1 个答案: