bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速,移动优先的网站和Web应用程序。

innerhtml 仅在第二次单击时更改

我有一组面板,我想在单击时单独展开,但如果用户单击“展开+”,文本应更改为“折叠”,并且所有面板都应展开。目前...

回答 1 投票 0

有没有简单的方法可以从 ASP.NET Core 中的枚举创建 Bootstrap 单选按钮组?

我有一个关于优先级的枚举: 公共枚举优先级 { P1, P2, P3, P4, P5, } 我想在 Bootstrap 中制作一个单选按钮组,以选择哪个项目...

回答 2 投票 0

Bootstrap 模式 YouTube 视频嵌入全屏并自动播放

https://codepen.io/JacobLett/pen/xqpEYE 在此 YouTube 视频中,点击按钮时会自动播放。我还需要一项功能,它应该在移动设备上点击的横向(全屏)模式下播放 ...

回答 1 投票 0

在移动设备上运行网站时图像大小混乱

所以我想在一些文本后面显示一张图像。当我在桌面浏览器上打开该网站时,它工作正常。即使从控制台进入移动模式也不会出现任何问题。然而,

回答 3 投票 0

如何将表单选择选项选择更改为深色模式

如何更改 css 样式表以使表单选择变暗? 1 如何更改 css 样式表以使表单选择变暗? <select class="form-select"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> </select> 添加类 bg-dark 使背景变暗,并添加 text-white 以获得更好的对比度。 <select class="form-select bg-dark text-white"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> </select> 将 data-bs-theme="dark" 添加到外部 div: <div data-bs-theme="dark"> <select class="form-select form-select-sm border-0 shadow-none"> <option value='ENG'>ENG</option> <option value='HIN'>HIN</option> <option value='GER'>GER</option> <option value='FRN'>FRN</option> </select> </div>

回答 0 投票 0

Bootstrap 4.6 在导航选项卡内容中创建滚动 div

我正在使用Bootstrap 4.6。我想在导航选项卡内容内创建两个可自动滚动(当内容溢出时)的列内容。我正在尝试使用 Flex 实用程序。 这是我写的代码,但不是

回答 1 投票 0

Material Design - Bootstrap 输入字段问题

这是我得到的MDB引导代码。 代码链接:https://mdbootstrap.com/docs/standard/extended/login/#:~:text=EDIT%20IN%20SANDBOX-,Registration%20page,-Once%20again%2C%20the

回答 0 投票 0

在我的 Django 项目中使用 Crispy 表单,输入字段似乎太小

当我看到其他示例时,人们可以使整个字段全屏显示。像这样: 但是我的屏幕上显示的内容太小: 我该如何修复它? 作为参考,我正在使用 Bootstrap v4.5.3 代码:

回答 1 投票 0

Bootstrap 4 中的 .btn-default 去哪儿了?

根据 Bootstrap 3 到 Bootstrap 4 迁移文档: 纽扣 将 .btn-default 重命名为 .btn-secondary。 但 Bootstrap 4 .btn-secondary 看起来一点也不像旧的默认按钮。

回答 3 投票 0

Bootstrap Collapse 需要什么?

这原本是有效的,直到我删除了一些 JS 文件和未使用的 CSS。现在,我无法再展开手风琴按钮。我相信我的实现不需要 JS。然而,对于...

回答 2 投票 0

使用 onchange 参数选择排序选项时如何重新加载页面

我有一个小问题。当我在下拉列表中选择一个参数时,我无法刷新页面...当我在新文档中的页面之外尝试它时,这不是问题,我不知道是否是问题

回答 1 投票 0

我想在react中使用bootstrap模板,无法使用javascript文件

我想尝试在react中使用bootstrap模板,我在组件页面中导入了所有css文件 。但无法使用 javascript 文件,我将它们导入到 body 内的 public/index.html 中。去上班

回答 1 投票 0

在 Bootstrap 4 中获取圆形按钮时遇到问题

我直接在我的代码中使用了这个小提琴。这个想法是创建一个圆形按钮。 https://jsfiddle.net/yeyene/59e5e1ya/ 不过,此代码适用于 bootstrap 3。当使用它引用 bootstrap 4 时,...

回答 4 投票 0

如何从 javascript 添加 html 元素

我试图在通过向复选框添加事件侦听器函数来选中复选框时创建芯片,但它没有发生。我认为该元素没有被插入到 html 中。 这里...

回答 1 投票 0

如何在 javascript 或 jquery 中切换网站标题

我正在研究 Bootstrap 用例。我使用 Bootstrap 设计了一个菜单。我希望向下滚动时隐藏菜单,向上滚动时显示菜单。 (向下滑动/向上滑动)。 ...

回答 1 投票 0

Blazor Bootstrap - 单击外部元素时下拉列表不会关闭

在我的 Blazor Server 应用程序中,我无法使默认的 Bootstrap 下拉行为起作用:当我单击菜单 div 之外的任何位置时,我需要下拉菜单消失。 我尝试过 @onfocusout 但如果我...

回答 3 投票 0

具有相同 id 的引导多重复选框不可点击

我有这样的复选框 我有这样的复选框 <div class="form-group"> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="machine" name="type[]" id="type"> <label for="machine"> Mesin </label> </div> </div> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="utility" name="type[]" id="type"> <label for="utility"> Utility </label> </div> </div> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="others" name="type[]" id="type"> <label for="others"> Others </label> </div> </div> </div> 我的问题是我什至无法检查或取消检查我的输入。我对这些代码感到厌倦了吗? 注意:我使用相同的 id,因为我需要在 jquery 上进行验证。如果我使用不同的 ID,则验证根本不起作用。 按如下方式修改 HTML: <div class="form-group"> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="machine" name="type[]" id="machine"> <label for="machine"> Mesin </label> </div> </div> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="utility" name="type[]" id="utility"> <label for="utility"> Utility </label> </div> </div> <div class="col-sm-3"> <div class="checkbox clip-check check-primary"> <input type="checkbox" value="others" name="type[]" id="others"> <label for="others"> Others </label> </div> </div> </div> 保持标签的 for 属性中存在的相同 ID 值

回答 1 投票 0

如何使用nextjs更改图像大小

我使用 next/image 在引导卡中有一个图像。我希望图像较小,并且不要填满卡片的整个顶部。大约是原来大小的60%。我试图包裹我...

回答 3 投票 0

我无法让 col-8 与 col-4 并排渲染?

以下是我提交的代码。 以下是我提交的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container"> <div class="row no-gutters"> <div class="col-8"> <img class="img-fluid" src="pic/Indian.jpg" alt=""> </div> <div class="col-md-8"> <p> This reciepie is called Tikka Masala, and its a fovrite in south India. The orgin of this dish is unkown to me, but I suppose that I can look into it and find out. When I go to Indian restaurants I always order this meal because its so good. I think that every one should try this food at some point in thier life and many will like it. </p> </div> 这是我需要帮助的部分,它似乎无法正确渲染。 这种接收器被称为 Tikka Masala,在印度南部很受欢迎。 我不知道这道菜的起源,但我想我可以看看 深入其中并找出答案。当我去印度餐馆时我总是点菜 这顿饭因为太好吃了。我认为每个人都应该尝试这个 在他们生命中的某个时刻,很多人都会喜欢食物。 在引导程序中,列数限制为 12。请参见下图。 在您的代码中,您使用了以下 2 行 <div class="col-8"> <div class="col-md-8"> 这意味着您首先获取 8 列,然后再获取 8 列。共16栏。因此,要获取另外 8 列,请转到下一行。如果您想通过限制一列来解决此问题,请将列数限制为 12。 解决方案1: <div class="col-8"></div> <div class="col-4"></div> 解决方案2: <div class="col-md-4"></div> <div class="col-md-8"></div> 我希望这对你有帮助。谢谢。

回答 1 投票 0

在 Blazor WebAssembly 应用程序中更新到较新版本的 Bootstrap 和 font Awesome 的最佳方法

谁能告诉我从创建项目时使用的默认版本更新到 Blazor WebAssembly 应用程序中 Bootstrap 和 font Awesome 较新版本的最佳方法?

回答 3 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.