我在Django和HTML中很天真,试图使用Django建立一个App.我知道了getbootstrap.com网站.我试图在我的index.html文件中呈现下拉按钮.

下拉按钮的代码如下所示.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

我期待着一个如下所示的按钮:

enter image description here

但我得到的按钮如下所示:

enter image description here

我想知道我哪里错了?

Update 1

我将index.html文件放在模板文件夹中,如下所示:

create_user是我正在构建的应用程序,ops_solution_v0是我正在开发的项目

enter image description here

推荐答案

我想您忘了在您的index.html文件中添加CDN链接.

您只需在index.html文件中添加如下代码:

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

将上面的CDN链接添加到索引文件中的HEAD标记中.

您的输出将按预期显示

Html相关问答推荐

隐藏滚动条和禁用文本 Select 的CSS技术?

将CSS应用于TD标记内的div

当在双引号|Angular .html文件中使用时,Pretier会将单引号字符替换为&;Quot;

Tumblr博客:如何修复提交页面和询问页面框列计数问题?

正文不能填满浏览器100%的高度

在FlexBox中将div拉伸到父div的完全高度

在CSS中旋转排除的蒙版图像

渐变进度条位置

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

当文本添加到元素中时,将元素拉到页面上

高度:适合-内容不拉伸以适合内部长度

浏览器是否可以呈现存储在代码点0x09处的字形?

阴影部分内部的ionic Select 元素

我真的需要一个容器来让行和列正常工作吗? ( bootstrap 程序 v5)

使用修饰键微调 HTML 输入范围中的值

为什么盒子不在div中显示?

CSS 中的 fingerprint scanner 动画

使用 TailwindCSS 将徽标放在左上角,将菜单放在右上角

Primeng浮动标签溢出管理

如何在 Tailwind CSS 中创建响应式网格布局?