Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
这是我的 HTML 和 JavaScript 代码 这是我的 HTML 和 JavaScript 代码 <script src = "../js/jquery.min.js"></script> <script src="../js / formvalidation / bootstrapValidator.min.js"></script> <script type="text / javascript"> $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Field is required' } } }, } }); }); </script> <form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off"> <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option>--Select--</option> <option>001</option> <option>002</option> <option>003</option> </select> <input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" /> <button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button> </form> 选择框验证不起作用，文本框验证正常工作。 我删除了选择框类 selectpicker 验证工作，但放置 selectpicker 类则不起作用 您需要添加一个submitHandler $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Field is required' } } }, } submitHandler: function (validator, form, submitButton) { return false; } }); }); 您还需要为选项元素分配值属性 将第一个选项值设置为空，否则它的值为--Select--，因此条件失败。 <option value="">--Select--</option> 已修改 <!DOCTYPE html> <html> <head> <title>BootstrapValidator demo</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> </head> <body> <div class="container"> <div class="row"> <!-- form: --> <section> <div class="col-lg-8 col-lg-offset-2"> <div class="page-header"> <h2>Sign up</h2> </div> <form id="staff_add" method="post" class="form-horizontal" action="target.php"> <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option>--Select--</option> <option>001</option> <option>002</option> <option>003</option> </select> <br><br> <input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/> <br><br> <button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button> </form> </div> </section> <!-- :form --> </div> </div> <script> $(document).ready(function() { $('#staff_add').bootstrapValidator({ message: 'This value is not valid', fields: { vender: { validators: { notEmpty: { message: 'The Field is required' } } }, invoicenumber: { validators: { notEmpty: { message: 'The Fieldsd is required' } } }, } }); }); </script> </body> </html> 要将选项设置为“作为验证答案无效”，您应该禁用它： <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required"> <option disabled="disabled">--Select--</option> <option>001</option> <option>002</option> <option>003</option> #### Apply value="" it works.### <label>Role</label> <select class="form-control" id="roleId" required> <option value="">-Select-</option> <option value="1">Doctor</option> </select>
我有一个使用 Bootstrap 5 设计样式的 元素。 我有一个使用 Bootstrap 5 设计样式的 <select> 元素。 <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></label> <select asp-for="Schedule.Minutes" class="form-control" asp-items="Model.MinutesOptions"></select> <span asp-validation-for="Schedule.Minutes" class="text-danger"></span> </div> </div> 我正在使用 class="form-control"，以便它具有像我的其他元素一样的 Bootstrap 样式。但是，默认情况下，这会导致元素占据全部可用宽度。 在这种情况下，我希望元素足够宽以容纳其内容（在这种情况下，是最长的列表选项）。 Bootstrap 是否为此提供了选项？ 答案是除了 w-auto 之外还使用 form-control 类。 <select asp-for="ReportJobSchedule.Subject" class="form-control w-auto" asp-items="Model.MinutesOptions"></select>
所以我一直在寻找这方面的指导，但没有结果。 基本上，我只想有一个侧边栏，但是当屏幕变小时，即智能手机屏幕尺寸，它会变成
Carousel slick.js + bootstrap 列宽问题
我有这个网页http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html 我在黄色块中有一份推荐。我想要一个推荐的轮播；但你可以...
我目前正在使用 FontAwesome，并且很难将图标在容器中垂直和水平居中。我尝试过通过定位来做到这一点，但遇到了问题......
我正在尝试在引导模式中设置默认按钮。这是代码：http://plnkr.co/edit/1aLlDdL8WfkUrBVt4q31?p=preview 在模式窗口中，我希望“提交”按钮成为默认按钮。 我
我正在使用 Bootstrap Carousel。我想要的是滑块仅在单击导航或分页时才会滑动。 我试过删除 $('.carousel').carousel({ 间隔：6000 }); 它
所有， 在 bootstrap3 中，我使用按钮折叠 div，我有一个图像和文本，并在以下之间交替： + 更多 - 较少的 但是图像与文本未对齐。有什么办法可以对齐ima...
无法在 Angular 7 应用程序中覆盖 Bootstrap
在 Angular 应用程序中，我试图通过删除分隔线来覆盖我的面包屑样式。我使用 https://getbootstrap.com/docs/4.2/components/breadcrumb/#example。但它不起作用。 这是我的角度。
我正在使用 Bootstrap 3（完整版），并且在代码中使用 bootstrap 模式： 我正在使用 Bootstrap 3（完整版），并且我在代码中使用 Bootstrap 模式： <a data-toggle="modal" data-target="deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> <!-- Modal --> <div id="deleteMessage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 此代码是我从官方文档复制的，但它不起作用，模式窗口不显示。 有什么问题吗？ 尝试将锚定代码更改为： <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 教程里好像有错字，data-target属性里应该多了个“#”。 您忘记将 # 包含到 data-target 属性中 <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 现场演示
我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ &l... 我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style="background: url(1.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style="background: url(2.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style="background: url(3.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <script src="js/bootstrap.bundle.js"></script> 您需要使用 CDN 添加 bootstrap JS 和 Bootstrap CSS。您还需要添加图像 src，请参阅下面的示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style='height: 600px; background-size: cover'> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71auFznfVpL.__AC_SX300_SY300_QL70_ML2_.jpg" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html>
Bootstrap modal-open 导致 body 有 style="padding-right: 15px;"
在我的 bootstrap 3.3.7 网站上，打开模态框时，整个正文会显示“style =“15px””。当我打开模态框时，这会将我的顶部导航（固定导航）向右移动 15px。我无法使用 CSS 来删除...
我有一个需要验证的表单，并且适用于文本和文本区域，但不适用于内联单选按钮。 <... 我有一个需要验证的表单，并且适用于文本和文本区域，但不适用于内联单选按钮。 <form class="needs-validation" novalidate method="POST"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" required> <label class="form-check-label" for="inlineRadio1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" required> <label class="form-check-label" for="inlineRadio2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" required> <label class="form-check-label" for="inlineRadio3">3</label> </div> <div class="invalid-feedback"> Radio button is required. </div> <button class="btn btn-primary" type="submit">Validate</button> </form> 我看到提交时控件和标签变成红色，但无效反馈中的文本不存在。我还希望它一直向左对齐。 将此 CSS 类添加到您的文档中： .was-validated :invalid~.invalid-feedback { display: inline; } 通过这种方式，您可以覆盖提交表单后应用于 display: block 的 invalid-feedback，并且验证消息将内联显示，与其余内联对象对齐。
我是 Bootstrap 新手，正在尝试自定义 Bootstrap 的现有示例。我的目标是将 div 标签（id 为“inner”）扩展到屏幕的全宽。 我尝试了很多不同的...
由于某种原因，此下拉菜单在悬停时不显示列出的元素。使用引导程序。 我在这里错过了什么吗？也许这很简单，但我就是看不到。 由于某种原因，此下拉菜单在悬停时未显示列出的元素。使用引导程序。 我在这里遗漏了什么吗？也许这很简单，但我就是看不到。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Services --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <h6 class="dropdown-header">Dropdown header</h6> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> </div> </li> 在Bootstrap中，下拉菜单默认在鼠标点击时运行，如果你想在鼠标悬停时显示下拉菜单，那么你必须使用css或js 我用过css .dropdown:hover ul.dropdown-menu{ display: block; } .dropdown:hover ul.dropdown-menu{ display: block; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Services </button> <ul class="dropdown-menu"> <li><h6 class="dropdown-header">Dropdown header</h6></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> </ul> </div> 更多事情要在这里讨论： BS 中的打开下拉菜单是由 Popper.js 完成的（不是 bootstrap.min.js 的一部分）。因此，为了使下拉菜单正常工作，您需要通过捆绑包加载 Bootstrap JS，其中包含 Popper.js https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.bundle.min.js 由于您使用的是BS5，因此需要将data-toggle="dropdown"更改为data-bs-toggle="dropdown"。这是从版本 5 开始的新标记。 正如另一个答案中提到的，点击（而不是悬停）打开下拉菜单是 BS 哲学的核心部分（不幸的是）。因此，如果您想在悬停时打开子菜单，则必须添加额外的 CSS。 还要小心标记。使用BS推荐的结构进行导航会更干净（使用<ul>，<li>等） 改变<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> 到 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button> 将其更改为按钮即可使用！！
我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示...... 我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示... <OverlayTrigger placement="bottom" overlay={ <Tooltip id="tooltip" style={{ width: "100%", wordBreak: "break-all" }} > thisisalongstringthanusualhencenotfilledincontiner </Tooltip> } > <span>Hover over this text</span> </OverlayTrigger> 之前我遇到了让工具提示内容适合容器的问题，所以我使用了wordBreak: "break-all"，所以它适合容器框。 这里有一个工作示例... 但现在我得到了工具提示应显示水平长的要求。现在您可以看到它正在进行断词，并且容器是垂直的且宽度固定...但是如何更改工具提示容器的宽度以使文本在单行中水平较长？ 从上面的代码中，文本 thisisalongstringthanusualhencenotfilledincontiner 应显示在单行中，并展开工具提示... 如何更改 React Bootstrap 中工具提示容器的宽度？ <Tooltip className="mytooltip" ...> CSS .mytooltip > .tooltip-inner { max-width: 100%; } .mytooltip > .tooltip-arrow { ... } 在下面的类中添加此 CSS 属性。 .tooltip-inner { max-width: none; } 您可以添加此 CSS 内容： .tooltip .tooltip-inner { width: 7em; white-space: normal; } 如果您检查它，您会发现默认情况下工具提示位于其引用的项目之后。所以你可以用 CSS 来定位它的宽度和内容。
我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示...... 我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示... <OverlayTrigger placement="bottom" overlay={ <Tooltip id="tooltip" style={{ width: "100%", wordBreak: "break-all" }} > thisisalongstringthanusualhencenotfilledincontiner </Tooltip> } > <span>Hover over this text</span> </OverlayTrigger> 之前我遇到了让工具提示内容适合容器的问题，所以我使用了wordBreak: "break-all"，所以它适合容器框。 这里有一个工作示例... 但现在我得到了工具提示应显示水平长的要求。现在您可以看到它正在进行断词，并且容器是垂直的且宽度固定...但是如何更改工具提示容器的宽度以使文本在单行中水平较长？ 从上面的代码中，文本 thisisalongstringthanusualhencenotfilledincontiner 应显示在单行中，并展开工具提示... 如何更改 React Bootstrap 中工具提示容器的宽度？ <Tooltip className="mytooltip" ...> CSS .mytooltip > .tooltip-inner { max-width: 100%; } .mytooltip > .tooltip-arrow { ... } 在下面的类中添加此 CSS 属性。 .tooltip-inner { max-width: none; } 你可以添加这个CSS .tooltip .tooltip-inner { width: 7em; white-space: normal; } 如果您检查，您会发现默认情况下工具提示位于其引用的项目之后。所以你可以用 CSS 来定位它的宽度和内容。
htmx get/post 请求交换后 JavaScript 无法运行
我正在构建一个Django项目，并尝试使用htmx获取和发布数据，一切正常，这意味着我可以获取和发布数据，这没有问题，但问题是在数据被sw之后......
这是来自Bootstraps官网的示例。是否可以去除手风琴上的圆角？ ` <... 这是来自Bootstraps官网的示例。是否可以去除手风琴上的圆角？ ` <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> ` 我花了几个小时试图去除角落但没有运气 .accordion-item:last-of-type .accordion-button.collapsed {border-bottom-left: 0;) 将其添加到您的 CSS 中： .accordion-item { border-radius: 0 !important; } 此外，如果您还想从“突出显示”中删除圆角，则可以添加此选项。 .accordion-item, .accordion-button { border-radius: 0 !important; } 示例： #wraps { margin: 50px; } .accordion-item, .accordion-button { border-radius: 0 !important; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div id="wraps"> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> </div> 这不适用于您的情况，但我对react-bootstrap的Accordion control有类似的问题。已接受答案中建议的 CSS 更改对我来说不起作用。事实证明，我所要做的就是将 flush={true} 添加到我的手风琴中：<Accordion defaultActiveKey={open.current} flush={true} alwaysOpen>
如何使用 Angular 6 和 bootstrap 3.3.7 创建可折叠/可扩展/带有复选框列表的树结构
我正在尝试在父节点和子节点上都带有复选框的可折叠/树结构。我无法准确地创建它。我能够从 JSON 创建无序列表 { &...