bootstrap-4 相关问题

我正在尝试创建一个多选下拉菜单，用于切换哪些校园信息可见，并遇到了 David Stutz 的引导插件。我调用了我的链接和脚本：我正在尝试创建一个多选下拉菜单，用于切换哪些校园信息可见，并遇到了 David Stutz 的引导插件。我调用了我的链接和脚本： <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> 我创建了下拉菜单 <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> 要切换的部分中的id <div id="Campus1" class="rounded"> // Campus 1 information goes here </div> // <div> for Campus 2 and 3 go here 还有 javascript <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ includeSelectAllOption: true }); $('#campusMultiSelect').change(function () { // Get the selected values var selectedValues = $(this).val(); // Define an array of campus IDs to toggle var campusIDs = ['Campus1', 'Campus2', 'Campus3']; // Iterate through the campus IDs and toggle their visibility campusIDs.forEach(function (campusID) { var showContent = selectedValues && selectedValues.indexOf(campusID) !== -1; $('#' + campusID).toggle(showContent); }); }); }); </script> 但是，当我运行它时，这是我得到的框，而不是我应该通过每个选项旁边的选择框得到的框我遵循了使用文档中的所有说明，但显然没有得到我所期望的。存储库中的代码最后一次更新是在 2022 年，所以这个多选仍然与当前版本的 Razor、ASP.NET Core 和 C# 兼容，还是我只是犯了一个非常明显的错误，忘记了分号之类的？您可以在浏览器的开发者工具中查看您的bootstrap版本，并查看是否有相关错误信息。您可以选择以下两种方法： 1. 如果您使用的bootstrap版本是V5，您可以迁移到v4。 2. 或者可以使用对应版本的bootstrap，但需要在Bootstrap Multiselect插件上进行相关的初始化配置。可以作为bootstrap5.1.3的参考： <link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" /> <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> @section scripts { <script src="~/lib/jquery/dist/jquery.js"></script> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ buttonClass: 'form-select', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>', } }); }); </script> } 可以看Multiselect的介绍：

asp.net-core razor bootstrap-4 bootstrap-multiselect

回答 1 投票 0

使引导程序轮播上的背景图像变暗

我在将图像格式设置为较暗以便阅读图像上的文本时遇到问题。我正在使用引导轮播主题，但无法使图像变暗！不透明度有效，但它使文本变得...

css bootstrap-4

回答 5 投票 0

我的标题标签内的 html 菜单未正确悬停在角度上，请指导我

下面是我在 Angular 应用程序中使用的 CSS，菜单没有悬停在角度组件中的所有控件上 CSS 导航{ 背景颜色：#4D678D； } 导航 ul { ...

html css twitter-bootstrap bootstrap-4 angular-ui-bootstrap

回答 1 投票 0

Vue Bootstrap b表延迟加载数据

所以，以最简单的方式，我使用 Vue Bootstrap 作为我的项目的框架。我需要向我的项目添加一个自定义表格，其中的数据可以包含数千个单元格（100+ 列和 1k+ 行）。我...

vue.js bootstrap-4 vuejs2 nuxt.js bootstrap-vue

回答 2 投票 0

Blazor 表单验证 Bootstrap 集成

我有一些 Razor 开发经验，并决定尝试一下 Blazor。我遇到了一个已经熟悉的问题 - 将验证与 Bootstrap 集成：Blazor 验证结果类不支持

css validation bootstrap-4 blazor

回答 2 投票 0

Blazor 表单验证 Bootstrap 集成

我有一些 Razor 开发经验，并决定尝试一下 Blazor。我遇到了一个已经熟悉的问题 - 将验证与 Bootstrap 集成：Blazor 验证结果类不支持

css validation bootstrap-4 blazor

回答 2 投票 0

引导响应式侧边栏菜单到顶部导航栏

所以我一直在寻找这方面的指导，但没有结果。基本上，我只想有一个侧边栏，但是当屏幕变小时，即智能手机屏幕尺寸，它会变成

css twitter-bootstrap bootstrap-4 responsive-design bootstrap-5

回答 3 投票 0

导航栏的下拉菜单在主页导航栏长度之后不显示

我的导航栏有一个奇怪的问题。我会说，我确实使用了网上的模板。目前的问题是，在主页上，下拉菜单没有完全展开，只能延伸到最远......

javascript html css bootstrap-4

回答 1 投票 0

在引导类中使用十六进制颜色

通常我在引导程序中使用背景颜色作为 div 中的颜色这里我想要十六进制的背景颜色#0277bd。我怎样才能使用这个十六进制颜色...

bootstrap-4

回答 1 投票 0

为什么我无法在boostrap中设置procent值

我想用（细条）制作一个条形，但由于我使用引导程序，我无法完全控制尺寸；我想用（细条）制作一个条形，但由于我使用引导程序，我无法完全控制尺寸； <template> <div class="container-fluid mx-auto"> <div class="row"> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> </div> </div> </template> <script> export default { setup() {}, }; </script> <style scoped> .container-fluid { border: 3px solid black; width: 100%; height: 20%; } .row { display: flex; justify-content: space-evenly; align-items: center !important; } .square { width: 10vw; height: 3vh; background-color: red; } </style> 我想将 .container-fluid 高度设置为 50% 但我不能，我想以 % 为单位设置 .square 宽度和高度，但我不能，而且最重要的是，在 .row justifycontent 中，所有项目都不想居中对齐可以，但是对齐项目：居中不行吗？如何以 % 来描述尺寸并将项目居中对齐？我建议您在基于视口的单位中设置任何 Bootstrap 元素的 width 和 height。它们是 vh、vw、vmin 和 vmax。百分比不能按照您想要的方式使用。例如，值 1vh 等于视口高度的 1%。请参阅下面的片段。对于align-items部分，您想要实现什么目标？你想垂直对齐什么？ .container-fluid { height: 50vh; background-color: lightgrey; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid">Lorem ipsum</div> </body> </html>

html css vue.js bootstrap-4 bootstrap-5

回答 1 投票 0

Django 消息 + bootstrap toast。如何让它发挥作用？

尝试让引导弹出窗口和 django 消息正常工作。问题是我不明白如何正确执行此操作，以便如果上下文中有消息，它将显示在...

django bootstrap-4 message toast

回答 5 投票 0

datepicker 如何显示更多年份？

我正在使用引导日期选择器，当我打开下拉菜单更改年份时，它仅显示 20 年...当前年份.. 10 年前和 10 年后。我怎样才能改变它并使其显示40...

c# bootstrap-4 datepicker

回答 2 投票 0

如何在不同视口引导程序中对齐文本

我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它发挥作用。我正在使用 vue-bootstrap。我正在尝试将一些文本左对齐为大，居中对齐为中，右对齐为小。但我无法让它工作。我正在使用 vue-bootstrap。 <div class="container"> <b-row class="row"> <b-col sm="4" class="my-auto text-lg-left text-md-center text-sm-center"> <span class="text-white"> 2020 copyright, All rights reserved. </span> </b-col> <b-col sm="4" class="mt-2 text-center"> <p>Some text</p> </b-col> <b-col sm="4" class="mt-2 text-right text-sm-center"> <p>Some text</p> </b-col> </b-row> </div> 如何在不同视口上对齐文本？ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <p class="text-lg-left text-md-center text-sm-center"> 2020 copyright, All rights reserved. </p> <quote>Bootstrap v4.3.1 is required, v4.5.3 is recommended</quote> 引导程序您的类应该位于“p”标签内。 <p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> 要按照您提到的顺序对齐文本，请使用： <p class="text-right text-md-center text-lg-left">Something</p>

html bootstrap-4 bootstrap-vue

回答 2 投票 0

悬停效果不会调整我的按钮大小

我试图启动相同的效果，如下所示：正如您所看到的，当鼠标悬停在按钮上时，按钮具有缩放和褪色的白色效果。我在我的包上尝试了同样的事情...

html css bootstrap-4

回答 2 投票 0

如何在上传前预览多个图像多个div - jQuery

我有一个用于上传多个图像的 Bootstrap Modal。当用户点击“添加产品图像”按钮时，它将生成一个新的图像上传输入表单，当用户选择图像时，它将生成

jquery bootstrap-4

回答 3 投票 0

bootstrap-4 相关问题

最新问题