标签: bootstrap-5
Bootstrap 5 - 未捕获类型错误：Popper__namespace.createPopper 不是函数
我正在使用 Django 来提供网页服务。
\n- \n
我试图确保我能够下载使网页功能按预期离线使用所需的所有资源（因为其中一个资源可能无法供我的客户请求，所以我希望能够让我的服务器提供这些文件，或者如果我决定在本地主机上的 Raspberry Pi 上运行该网站的副本或类似的东西）。其中之一是 bootstrap 5。
\n \n我正在尝试使用他们的下拉菜单功能......根据他们的文档：
\n\n
\n下拉菜单基于第三方库 Popper 构建，它提供动态定位和视口检测。确保在 Bootstrap\xe2\x80\x99s JavaScript 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 。Popper 不用于在导航栏中定位下拉菜单，但不需要动态定位。
\n \n因为我渴望找到解决方案，所以我插入了一堆
\n<script>标签试图排除问题......也许这是一个坏主意。 \n
接下来我可以尝试什么？
\n{% load static %}\n\n<html class="w-100 h-100">\n<head>\n <title>\n Fonts\n </title>\n\n <!--Important meta tags-->\n <!--Cancel zoom for mobile-->\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />\n <!--example:-->\n <!--href="{% static \'polls/style.css\' %}"-->\n\n <!--theme-->\n <link rel="shortcut icon" type="image/jpg" href="{% …推荐指数
解决办法
查看次数
Bootstrap 5 导航栏右对齐项目
如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中，它是navbar-right. 在 Bootstrap 4 中，它是ml-auto. 但不适用于 Bootstrap 5。
推荐指数
解决办法
查看次数
在 angular 和 bootstrap 5 beta 中找不到 VS 代码 CSS 类选择器
我正在使用带有 angular 的 bootstrap 5，并将样式和脚本添加到 angular.json，但 VS Code 中的问题无法识别 bootstrap 类。
推荐指数
解决办法
查看次数
在 Vue 3 中使用 Bootstrap 5
我想在 Vue 3 中使用 Bootstrap 5。由于 Bootstrap 5 使用 vanilla JS（没有 JQuery），我可以直接在 Vue 3 项目中使用 Bootstrap 5（不使用 Bootstrap-Vue）吗？有人可以指导我如何在 Vue 3 中使用 Bootstrap 5 吗？
推荐指数
解决办法
查看次数
Bootstrap root.scss 中未定义变量 $theme-colors-rgb
我正在尝试在我的 Angular 项目中使用 Bootstrap 5.2 的某些部分。它是针对 SASS 配置的，因此我在项目的主 style.scss 中导入 Bootstrap 的 scss 文件。我这样做是因为我使用的是 Angular Material，所以只需要 Bootstrap Grid 和其他一些基本部分。
\n目前我有
\n样式.scss
\n@import "~bootstrap/scss/functions";\n@import "~bootstrap/scss/variables";\n@import "~bootstrap/scss/mixins";\n@import "~bootstrap/scss/root";\n@import "~bootstrap/scss/reboot";\n@import "~bootstrap/scss/type";\n@import "~bootstrap/scss/grid";\n我只包含 root.scss，因为这是 Bootstrap 文档（https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults）中描述的，但删除它会使 ng 构建仅在grid.scss 作为 $gutters 变量未定义。然而，包含它后 ng build 的输出是：
\n./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n \xe2\x95\xb7\n20 \xe2\x94\x82 @each $color, $value in $theme-colors-rgb {\n \xe2\x94\x82 ^^^^^^^^^^^^^^^^^\n \xe2\x95\xb5\n node_modules\\bootstrap\\scss\\_root.scss 20:27 @import\n src\\styles.scss 22:9 root stylesheet\n\n./src/styles.scss - Error: Module build …推荐指数
解决办法
查看次数
Bootstrap 输入组中的 5 个浮动标签
我想一起使用 Bootstrap 的“浮动标签”和“输入组”组件。我遇到的问题是当输入聚焦时标签被隐藏。在下面的代码示例中，我有以下场景：
- 两个组件（单击输入时标签会消失）。
- 仅浮动标签
有谁知道如何让这些组件一起工作？
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-floating input-group mb-3">
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="code4" placeholder="Code 4">
<label for="code4">Code 4</label>
</div>推荐指数
解决办法
查看次数
Bootstrap 5 下拉菜单在 Angular 12 上不起作用
我正在尝试在 Angular 12 中添加 Bootstrap 5 下拉列表，但它不起作用。
我已经安装了所有必需的软件包，并将它们添加到angular.json文件中。
从 Bootstrap 5 文档复制了确切的示例，但仍然不起作用。
在angular.json我已经给出
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
下面是我的 HTML 代码（与 Bootstrap 5 文档中的相同）
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-
bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
我使用命令npm i来安装软件包，但没有提及任何版本名称，所以我猜安装了最新版本。安装 jQuery 作为最后的手段读到 Bootstrap 5 不需要 jQuery。任何帮助是极大的赞赏。
推荐指数
解决办法
查看次数
Bootstrap 5 类“me-auto”的含义是什么
这是 bootstrap 5 navbar ul 部分代码。我的问题是：
我无法从左到右更改 ul 位置。
bootstrap 5类“me-auto”的含义是什么
家
链接下拉菜单
- 行动
- 另一个动作
- 这里还有其他东西 残疾人
推荐指数
解决办法
查看次数
Bootstrap 5 - 自定义主题颜色不更新类
我刚刚使用 Bootstrap 5 开始了一个新项目，我正在尝试使用一些自定义值设置主题颜色。然而，按照我一直做的方式做这件事给我带来了一些问题。
我创建了三种颜色：$primary、$secondary、$tertiary。但是，如果我添加任何类（例如 bg-tertiary），则不会发生任何变化，就好像它不存在一样。bg-primary 仅使用 Bootstrap 定义的默认颜色。
我的代码如下：
@import "bootstrap/_functions";
@import "bootstrap/_variables";
$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"light": $light,
"dark": $dark,
);
@import "bootstrap/bootstrap";
如果我更改默认值（例如“dark”）以使用 $tertiary，则 scss 文件中使用 $dark 的任何代码都会更改为使用 $tertiary 中的值。就像下面这样：
$theme-colors(
"dark": $tertiary
);
#pageFooter {
background: $dark; //This becomes #3fb247 the value from $tertiary
}
我究竟做错了什么？我不明白为什么 scss 文件中的变量会受到 $theme-colors 更改的影响，但类却不会。
编辑：
使用 chrome 检查器我可以看到 .bg-primary 使用 css 变量 --bs-primary-rgb。查看可用变量 --bs-primary 已更改为我设置的颜色，但不是 --bs-primary-rgb。
我怎样才能改变这个变量。应该自动完成吗？
经过进一步研究，这些 rgb 变量似乎已在 …
推荐指数
解决办法
查看次数
bootstrap 5 关闭模态与香草 javascript
您好按照此处的教程
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
，他们使用按钮来切换显示模式。如果你想用 javascript 在 Bootstrap 5 中显示模式，你基本上可以使用
var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop')); myModal.show();
我的问题是如何使用 javascript 关闭通过按钮打开的模式。基本上我怎样才能获得已经打开的模式的句柄？我意识到一旦我有了句柄我就会调用 .hide()
---编辑--- 为了弄清楚这一点。在 Bootstrap 5 中，当它不使用 javascript 打开时
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
我试图掌握该模式
推荐指数
解决办法
查看次数