Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
这是我的代码，但它不起作用。 当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示 PopOver 并且 HTML 源格式错误。 这是我的代码，但它不起作用。 当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示该 PopOver 并且 HTML 源格式错误。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 删除类属性。 它可以工作。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 我试图在引导弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。 请记住在弹出框元素上设置 data-html="true"（以及其他 data- 属性）。否则 HTML 内容将无法正确呈现。 更多详细信息可以在 Bootstrap 文档中找到：https://getbootstrap.com/docs/4.6/components/popovers/#options 只需将 popover 类用单引号括起来即可。 <div class='popover'>text text</div> 而不是 <div class="popover">text text</div> $element.popover({ animation: false, html: true, sanitize: false, placement: 'bottom', trigger: 'manual', content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>', }); 您可以像这样使用它，而不是向所有弹出窗口添加 data-html="true"： $('[data-toggle="popover"]').popover({html:true});
情况示例图 我正在使用 bootstrap 构建一个投资组合，并且顶部有轮播，但它溢出了更多，使其水平滚动。 轮播 html 情况示例图 我正在用 bootstrap 构建一个投资组合，顶部有轮播，但它溢出了更多，使其水平滚动。 Carousal html <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/animewallpaper7.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper8.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper9.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/animewallpaper6.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 这是我的CSS /* Ensure the carousel spans the full width of its container */ .carousel { width: 100%; margin: 0 auto; /* Center the carousel within its container */ } /* Remove extra padding and margin around the images */ .carousel-item img { width: 100%; /* Ensures the image covers the full width of the item */ height: 600px; /* Adjusts the height based on the width */ } 我需要轮播的大小与浏览器的大小一致，并且不会溢出，并且仍能保持响应速度 我假设您正在使用最新的引导程序，引导程序5。您只需要做的就是使图像的每个父级从body和html开始高度为100％。 html, body { height: 100%; margin: 0; padding: 0; } .carousel { width: 100%; height: 100%; } .carousel-inner { height: 100%; } .carousel-item { height: 100%; background-image: url("https://placehold.co/600x400"); background-size: cover; background-position: center; background-repeat: no-repeat; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> <div class="carousel-item"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div>
为什么这张图片在 pagespeed mobile 中总是显示为最大内容，真正的文件图像只是 6kb 格式的 webp 和大小 367x141 像素。它非常小，我可以压缩，但在页面速度中它总是......
在 Bootstrap 4 中，我理解它将默认的文本装饰设置为无。 但是使用 Bootstrap 5，如果我只是添加一个原始锚标记，它现在会显示蓝色文字和下划线。 我正在寻找...
我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： 1 我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中我希望有以下输出： 1-3-2 不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。 2021 - Bootstrap 5 响应式订购类现在为 order-first、order-last 和 order-0 - order-5 演示 2018 - Bootstrap 4 响应式订购课程现在为order-first、order-last和order-0 - order-12 Bootstrap 4 **push** **pull** 类现在为 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}`，并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmebUp)（这只适用于 4.0 beta 之前的版本） 引导程序4.1+ 由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从 order-1 到 order-12 进行排序，例如相对于父级 order-md-12 order-2 的 md（最后一个在 xs，第二个在 .row）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> 演示：使用order-*类更改顺序 桌面（较大屏幕）： 移动设备（较小的屏幕）： 还可以使用 flexbox 方向实用程序... 更改列顺序 <div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> 演示：Bootstrap 4.1 使用 Flexbox 方向更改顺序 旧版本演示 演示 - 阿尔法 6 演示 - 测试版 (3) 查看更多 Bootstrap 4.1+ 订购演示 相关 Bootstrap 4 中使用推/拉和 col-md-12 的列排序 Bootstrap 4 更改列的顺序 A-C-B A-B-C 这也可以通过 CSS“Order”属性和媒体查询来实现。 类似这样的： @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } CodePen 链接：https://codepen.io/preston206/pen/EwrXqm 即使这样也行： <div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div> 我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你： .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } ...并将类添加到第二列： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 编辑： 哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。 将此类用于第一列 第二个： 第三： 由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div> 但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。 您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上
如何使用 Bootstrap 和 jQuery 创建一个带有滚动阴影效果的收缩标题？
我正在使用 Bootstrap 4 和 jQuery 开发一个网页，我想创建一个当用户向下滚动页面时缩小尺寸并添加阴影效果的标题。我写了一些代码...
我有一个文章列表，我希望能够删除模式弹出窗口中选定的文章或所有文章。另外，我的视图中有复选框。我的想法 - 为每个人获取一个“Id”...
我正在尝试在提供的卡片之间添加一些节奏，但在卡片之间添加一些空间时遇到一些问题。 这是我的网站上目前的样子： 目前我的...
当我导入这个 Bootstrap 时我很挣扎。这是错误。 我已经做了 npm i boostrap jquery popper.js 。但是当我导入这些时，我收到了错误。 这是我从 m 进口的...
在较小的屏幕上查看网站时，Bootstrap 5 轮播标题文本会消失
我正在使用引导轮播代码。我的轮播文本在常规尺寸上看起来不错，但在较小尺寸的屏幕上看到时它就消失了。看起来文字已经隐藏在图像后面了。 ...
如何在 Django admin 中使用仪表板的 Bootstrap 主题？
我是 django 的新手，我想为 django 项目创建自己的自定义管理面板，我有一个 dashoard 的引导主题，我想将其作为我的项目的管理面板，如何做到这一点，我可以吗？ ..
n 不是 bs4.5.2 下拉菜单和 jquery 3.5.1 的构造函数错误
在index.html中，我包含了这些 <p>在index.html中，我包含了这些</p> <pre><code> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="492a263b2c097b6770677a">[email protected]</a>/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </code></pre> <p>导致错误的代码是以下前进按钮：</p> <pre><code><div className="btn-group float-right" role="group" aria-label="Button group"> <div className="dropdown"> <button className="btn btn-success dropdown-toggle" type="button" id={`forwardDropdown-${issue.issueId}`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Forward </button> <div className="dropdown-menu" aria-labelledby={`forwardDropdown-${issue.issueId}`}> <a className="dropdown-item" href="#">Action</a> <a className="dropdown-item" href="#">Another action</a> <a className="dropdown-item" href="#">Something else here</a> </div> </div> <button type='button' className="btn btn-danger">Discard</button> </div> </code></pre> <p>我得到的错误是</p> <pre><code>Uncaught TypeError: n is not a constructor at i.show (dropdown.js:175:22) at i.toggle (dropdown.js:126:10) at HTMLButtonElement.<anonymous> (dropdown.js:363:14) at Function.each (jquery-3.5.1.slim.min.js:2:3182) at E.fn.init.each (jquery-3.5.1.slim.min.js:2:1660) at t._jQueryInterface [as dropdown] (dropdown.js:350:17) at HTMLButtonElement.<anonymous> (dropdown.js:515:31) at HTMLDocument.dispatch (jquery-3.5.1.slim.min.js:2:42868) at v.handle (jquery-3.5.1.slim.min.js:2:40852) </code></pre> <p>react在屏幕上显示的错误如下</p> <pre><code>Script error. at handleError (http://localhost:3000/static/js/bundle.js:50096:58) at http://localhost:3000/static/js/bundle.js:50115:7 </code></pre> </question> <answer tick="false" vote="0"> <p>我也有同样的问题，最初我在我的基本模板中使用这些版本</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="c1a2aeb3a481f3eff8eff2">[email protected]</a>/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>``` When I changed to these versions below, my bootstrap dropdown started working properly. ```<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="68180718180d1a46021b285946595e4659">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="0b6964647f787f796a7b4b3f253e2538">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>``` I was compatibility issue, you can refer for the links here: `https://getbootstrap.com/docs/4.5/getting-started/introduction/` </code></pre> </answer> </body></html>
我正在使用带有 11 张幻灯片的 Bootstrap 4 轮播，它们按预期工作正常。我有另一个 div (#div-info) 说我希望在其中显示某些文本和一些其他图像按照轮播 sli...
我已完成显示 Django 网站项目的图像滑块的所有必要步骤。但是图像没有显示，没有显示任何错误，我认为我家有一个错误......
活动选项卡未在 HTML、CSS 的垂直选项卡布局中显示在图像上方
我正在开发一个具有垂直选项卡布局的网页，其中每个选项卡对应于一个图像和一些内容。我面临的问题是活动选项卡没有按预期出现在图像上方......
如何让我的 ngDropdown 菜单在悬停而不是单击时工作？
我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ 我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ <div ngbDropdown class="d-inline-block dropdown"> <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a> <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary"> <a class="dropdown-item">Learning Outcomes</a> <div class="dropdown-divider"></div> <a class="dropdown-item">Learning Plan</a> </div> </div> 在 html 模板中为您的 ngbDropdown 创建一个变量（无论名称是什么）： #drop 指定打字稿类型 ngbDropdown #drop="ngbDropdown" 在 ngbDropdown 上的事件 mouseenter 调用该方法： <li ngbDropdown #drop="ngbDropdown" (mouseenter)='over(drop)'> 在 ngbDropdownMenu 上的事件 mouseleave 调用该方法： <div ngbDropdownMenu (mouseleave)='out(drop)'> over(drop:NgbDropdown){ drop.open() } out(drop:NgbDropdown){ drop.close() } <li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseenter)='over(drop)' (mouseleave)='out(drop)'> <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button"> Dynamic </a> <div ngbDropdownMenu aria-labelledby="navbarDropdown3" class="dropdown-menu"> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a> </div> </li> 您可以使用 mouseover 代替 mouseenter，但 mouseenter 更好。 您可以使用 mouseout 代替 mouseleave，但 mouseleave 更好。 dropdown API 有一个 toggle() 方法，以及显式 open() 和 close()。通过绑定到 (mouseenter) 和 (mouseleave) 事件来在悬停时调用它们。 以下是基础知识，这不是完整的示例。您需要提供下拉菜单的参考。 <div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)"> ... <div> onHover(event): void { this.myDropDown.toggle(); } 尝试使用带有 mouseleave 和 mouseenter 事件的角度材料。 参考：https://www.thetopsites.net/article/54301126.shtml#:~:text=To%20hide%20menu%2C%20add%20mouseleave%20event%20for%20a%20menu.&text=Demos%20 %3E%20Menu%2C%20Now%20on%20点击，库%20到%20构造%20UI%2FUX。 演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v
在symfony项目中使用yarn安装Bootstrap时出错
我尝试使用yarn命令在我的symfony项目中安装bootstrap 4： 从缓存中获取时出现错误完整性错误 我遵循 symfony 的指导文档：https://symfony.com/doc/current/
我不明白以下情况。我的 app.scss 中有这样的 SCSS 变量导入顺序 @import '~/node_modules/bootstrap/scss/functions'; @import '~/node_modules/bootstrap/scss/var...
我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用一样 我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了 <div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 这是我的模态代码 $('#m_modal_1').on('shown.bs.modal', function () { $('#id_golongan').select2({ placeholder: "Pilih Golongan" }) }); 这是我的JS 我已经摆脱了 tabindex="-1" 并使用了 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 但不起作用，如果我使用 dropdownParent: $("#modal_penguasaan") 当我点击时模态消失 我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作 这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"： 我编写了以下代码，它适用于 Bootstrap 版本 >5.2： $(document).ready(function () { $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("#single-select-field").select2({ theme: "bootstrap-5", placeholder: "Select a category", allowClear: true, dropdownParent: $("#addModal") //ID of the Modal, }); });
我正在使用引导程序并遵循此文档： 我正在使用引导程序并遵循此文档： <div class="custom-file"> <input type="file" class="custom-file-input" id="customFileLang" lang="es"> <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label> </div> $custom-file-text: ( en: "Browse", es: "Elegir" ); 即使添加了 lang="es" 属性，输入文本也不会被翻译。 这里有一个codepen，我缺少什么？ https://codepen.io/anon/pen/ZxGNrw 这是因为 Bootstrap SASS 没有导入到 Codepen 中。您首先需要 @import "bootstrap/functions" （因为这就是 $custom-file-text() 所在的位置），进行更改，最后 @import "bootstrap".... @import "bootstrap/functions"; $custom-file-text: ( en: "Browse", es: "Elegir" ); @import "bootstrap"; 我不知道如何将 Bootstrap SASS 导入 Codepen，但这里有一个 Codeply 上的工作示例：https://www.codeply.com/go/2Mo9OrokBQ 相关问题： Bootstrap 4 文件输入 好吧，实现这一点的最佳方法就是覆盖 CSS 伪类 ::after .custom-file-label::after { content: "Charger";} 如果覆盖 CSS，最好使用“:lang()”选择器仅将标签应用于给定语言： .custom-file-input:lang(fr) .custom-file-label::after { content: "Parcourir"; } 我也有同样的问题。自定义文件标签中的属性数据浏览修复了它： <div class="custom-file"> <input type="file" class="cursor-pointer custom-file-input" accept="image/*" id="foto" name="foto"> <label class="custom-file-label" for="foto" data-browse="Buscar">Seleccione un archivo</label> </div>