Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我有一个具有动态高度（大于屏幕高度）的模式窗口 Bootstrap。如何以编程方式将窗口滚动到底部？我尝试这样做： $('#modal').animate({scrollTop: $('#m...
更新： 我添加了这个： $("#id_project").select2({dropdownParent: $(".modal-body")}); ...这会导致下拉列表正确放置，并且可以输入搜索内容。
我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？ 我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单，但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗？ <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu" > <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a></li> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> </ul> </div> </ul> </li> </ul> </div> 您可以简单地添加另一个嵌套的 li，其中包含另一个 dropdown，并使用自定义 CSS 在悬停时显示该 dropdown。 现场工作演示： .sub-menu:hover .games-menu { display: block; } .sub-menu2:hover .our-pick-menu { display: block; } <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu"> <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li class="sub-menu"><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> <div class="dropdown"> <li class="sub-menu2"><a href="#" class="dropdown-item dropdown-toggle our-pick-2" data-toggle="dropdown">Our Pick 2</a> <ul class="dropdown-menu our-pick-menu"> <li><a href="2019.html" class="dropdown-item">2021</a></li> <li><a href="2020.html" class="dropdown-item">2022</a></li> </ul> </li> </div> </ul> </li> </div> </ul> </li> </ul> </div>
如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ 如何获取每个按钮之间带有边框线分隔符的 Bootstrap 按钮组？ <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> </div> https://getbootstrap.com/docs/4.6/components/button-group @padaleiana 解决方案运行良好！我使用了 btn-light 禁用按钮作为分隔符。 解决方法： 创建一个带有 mr-0、ml-0、pl-0 和 pr-0 类的按钮（左右边距和填充 = 0），并带有 disabled 属性（否则“分隔符”将不会出现！） <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button> <button type="button" class="btn btn-secondary">3</button> </div> padaleiana 的答案的替代方案如下，它不使用 HTML 按钮标签。因此，当 jQuery（或其他 Javascript）迭代按钮时，它可以避免出现问题： <div class="alert alert-dark m-0 px-0"></div> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">2</button> <div class="alert alert-dark m-0 px-0"></div> <button type="button" class="btn btn-secondary">3</button> </div> 可以只添加类“btn-outline-secondary”或任何一个适合您需要的每个按钮......例如：- <div class="btn-group btn-group-sm"> <button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button> <button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button> </div>
我想在按钮之间给出间距，有没有一种方法可以使用引导程序给出间距，以便它们在不同的屏幕分辨率下保持一致。 我尝试使用 margin-left 但这是正确的吗...
我正在使用 Bootstrap 并创建了一个具有简单导航菜单的页面。我想为其中一个链接添加模式，该链接已经有一个工具提示。 我确实将模态添加到了 li 中，就像
如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？
我正在尝试拥有一种设置面板，可以启用/禁用模式的 data-bs-keyboard 属性，允许或禁止它们使用转义键关闭。 到目前为止唯一的代码...
我正在将模态从 Bootstrap 3 升级到 4。我有一些代码将更新打开模态的选项（特别是背景和键盘选项）。在 Bootstrap 3 中我完成了这个...
将 bootstrap 添加到 symfony 应用程序的正确方法是什么？
我正在使用 symfony 框架 3 来开发 Web 应用程序。我需要将 boostrap 的功能添加到我的应用程序中。我使用以下命令安装了引导程序。 （我正在使用作曲家。） 作曲家
我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过卡组，但没有帮助。 我希望我的卡片覆盖屏幕的宽度，但我的代码如下。 尝试过card-deck，但没有帮助。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container p-3 bg-white rounded"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">0-10</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">1-9</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">2-8</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">3-7</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> <div class="carousel-item "> <div class="row"> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">4-6</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">5-5</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">6-4</h5> <p class="card-text">00</p> </div> </div> </div> <div class="col-lg-3"> <div class="card text-white bg-primary"> <div class="card-body"> <h5 class="card-title">7-3</h5> <p class="card-text">00</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> 在 div 块中将 col-lg-3 更改为 col-lg-auto，以便它在屏幕上占据相同的宽度 尝试使用 .card-columns 类，如下所示： <div class="card-columns"> <div id="card1" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 1 TITLE </h5> </div> <div class="card-body"> CARD 1 BODY </div> </div> <div id="card2" class="card"> <img class="card-img-top" src="" alt="Card image cap"> <div class="card-body"> <h5 class="card-title"> CARD 2 TITLE </h5> </div> <div class="card-body"> CARD 2 BODY </div> </div> </div> 并删除 row 和 col div，卡片列类负责剩下的
我想在每次单击按钮时切换按钮上的文本，例如从“显示更多...”到“显示更少...”。 我有一个按钮，用于展开或折叠附近的块（请参阅折叠部分...
我如何编辑这个 Bootstrap5 dopdown 菜单？
我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……
实现 Bootstrap Collapse “阅读更多”而无需绝对高度
此片段应显示一个水平 Bootstrap 卡，其中包含 .collapse，它使用 min- 和 max-height 来实现部分折叠。 （请以全页模式运行，以防滚动条不...
我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在手机和平板电脑上很好用，但在桌面上......
React + Bootstrap 5.3：如何在 Bootstrap 的 SASS 变量上应用条件 CSS 选择器覆盖？
TLDR：我想根据 CSS 选择器更改 Bootstrap SASS 变量值 例子： //$headings-color 是 Bootstrap SASS 变量 $标题颜色：红色； //作品 。红色的 { $headings-color：重新...
Bootstrap 折叠使用 css 选择第一个和最后一个子元素
如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”。 如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”.. <div id="accordion2" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 1<br /> </a></div> <div id="collapseOne" class="accordion-body in collapse" style="height: auto;"> <div class="accordion-inner"> <p>Content 1</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 2<br /> </a></div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 2</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 3<br /> </a></div> <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 3</p> </div> </div> </div> http://jsfiddle.net/PzB8D/1/ 你必须先去accordion-group，然后参考accordion-heading 这将是唯一一个具有类accordion-heading的元素:) .accordion-group:first-child .accordion-heading a{color: #f00;} .accordion-group:last-child .accordion-heading a{color: #0f0;} .accordion { &:last-child{ .card-header button.collapsed { border-bottom: none; } } &:first-child{ .card-header button.collapsed { border-bottom: none; } } }
引导模式打开时无法在输入类型=“文本”中键入（甚至无法聚焦）
我有一个 jquery 代码，它创建一个下拉菜单并将其精确放置在用户右键单击的位置。一切正常，除了一件事：我无法在输入字段中键入内容。 生成的dro...
我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： 我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： <input id="inp" type='file' accept="image/*"onchange="readURL(this);" /><br> <img id="blah"/> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(150) .height(150); }; reader.readAsDataURL(input.files[0]); } } </script> 我不太明白你的问题，你可以将数据保存在一个变量中，然后在必须发布图像时使用该变量，你应该避免将图像直接存储在数据库中，而是存储对它们的引用。 但是如果你想在选择图像后简单地显示图像，你可以这样做： let input = $('input'), img = $('img'), reader = new FileReader(); function readFile(e) { reader.onload = function(e) { img.attr('src', e.target.result) } reader.readAsDataURL(e.target.files[0]) } input.on('change', readFile) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inp" type='file' accept="image/*"/> <img/> 但是，如果您想将图像永久保存在数据库中，您将必须了解后端如何工作，并且可能需要设置一个 Restful API。
Bootstrap 5.3 tablist 里面<select><option>不能在除最新的firefox之外的其他浏览器上工作
除了 Mozilla Firefox 浏览器之外，我的以下代码无法正常工作。我正在使用 Bootstrap 5.3。任何人都可以帮助我制作带有选择选项的工作表格列表吗？ 这是我的代码在
我正在尝试使用一些引导功能，例如 Yii CHtml 类中的图标字形，这是我的代码： 登录'...