Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我一直在尝试在我创建的侧边栏底部获取这三个导航链接。我无法设法让他们到达那里。我不太确定还能尝试什么。 我有
如果我的 2 div 列为空，如何折叠它（不占用页面上的空间）。因此，如果第 2 列为空，则第 3 列应滑过并填充该空间。 ... 如果我的 2 div 列为空，如何折叠它（不占用页面上的空间）。因此，如果第 2 列为空，第 3 列应该滑过并填充该空间。 <div class="row"> <div class="col">first col</div> <div class="col">collapse this if empty</div> <div class="col">third col</div> </div> 使用 col-auto 将列缩小至其内容的宽度。如果它不包含任何内容，它将“崩溃”。然而，这会导致相邻的列扩大（增长） <div class="row"> <div class="col">first col</div> <div class="col-auto"></div> <div class="col">third col</div> </div> https://codeply.com/p/HfcKZmHE27
如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中，它位于导航栏右侧。在 Bootstrap 4 中，它是 ml-auto。但不适用于 Bootstrap 5。
我想在react bootstrap中为12张图像创建一个网格视图。 在 md 及以上版本中，图像应排列为 6x2（顶部 6 个，底部 6 个） 对于 sm 及以上，它应该是 2x6 对于 xs 来说应该是 1x12...
如何立即打开Bootstrap 5 Modal然后加载AJAX内容
在加载 AJAX 内容之前，Bootstrap 5 Modal 不会打开。对于我的用户来说，这是一个糟糕的用户体验，因为用户在单击“查看”按钮后必须等待几秒钟才能打开模式！ 所以话虽这么说
我希望图像位于 4 列中，但它落入 bootstrap 5 中的其他列中，并且我尝试了 img-responsive img-fluid 但它不起作用
定义的 4 个图像：其中三个图像位于 1 行，但第 4 个图像不断落入另一行 我尝试使用 margin o mx-0 或 px-0 但它只会减少其边距而不是其网格 ...
JQuery/AJAX 切换 POST 到 php 文件，无需导航
我一直在尝试使用多种方法来实现此功能，例如 Javascript 中的 $.ajax 并使用此处找到的 jQuery 插件：http://jquery.malsup.com/form/ 我已经搜索过 stackoverflow 和 goog...
如何使用 jQuery 打开 Bootstrap 模式窗口？
我正在使用 Twitter Bootstrap 模式窗口功能。当有人单击我的表单上的“提交”时，我想在单击表单中的“提交按钮”时显示模式窗口。 我正在使用 Twitter Bootstrap 模式窗口功能。当有人单击我的表单上的“提交”时，我想在单击表单中的“提交按钮”时显示模式窗口。 <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard Form</h2> <input type="text" value=""/> <input type="submit"/> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> jQuery： $('#myform').on('submit', function(ev) { $('#my-modal').modal({ show: 'false' }); var data = $(this).serializeObject(); json_data = JSON.stringify(data); $("#results").text(json_data); $(".modal-body").text(json_data); // $("#results").text(data); ev.preventDefault(); }); Bootstrap 有一些可以在模态上手动调用的函数： $('#myModal').modal('toggle'); $('#myModal').modal('show'); $('#myModal').modal('hide'); 您可以在此处查看更多内容：Bootstrap 模态组件 特别是方法部分。 所以你需要改变： $('#my-modal').modal({ show: 'false' }); 至： $('#myModal').modal('show'); 如果您想制作自己的自定义弹出窗口，请观看另一位社区成员推荐的视频： https://www.youtube.com/watch?v=zK4nXa84Km4 大多数情况下，当 $('#myModal').modal('show'); 不起作用时，这是由于两次包含 jQuery 造成的。包含 jQuery 2 次会使模态不起作用。 删除其中一个链接即可使其再次工作。 此外，某些插件也会导致错误，在这种情况下添加 jQuery.noConflict(); $('#myModal').modal('show'); 此外您还可以通过数据属性使用 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> 在这种特殊情况下，您不需要编写 javascript。 您可以在此处查看更多信息：http://getbootstrap.com/2.3.2/javascript.html#modals 只需使用 jQuery 选择器调用模态方法（不传递任何参数）。 这是示例： $('#modal').modal(); 如果您使用链接的 onclick 函数通过 jQuery 调用模态框，则“href”不能为 null。 例如： ... ... <a href="" onclick="openModal()">Open a Modal by jQuery</a> ... ... ... ... <script type="text/javascript"> function openModal(){ $('#myModal').modal(); } </script> 模态框无法显示。 正确的代码是： <a href="#" onclick="openModal()">Open a Modal by jQuery</a> <script type="text/javascript"> $(function () { $("mybtn").click(function () { $("#my-modal").modal("show"); }); }); </script> 以下是如何在文档准备好后立即加载引导程序警报。非常简单，只需添加 $(document).ready(function(){ $("#myModal").modal(); }); 我在 W3Schools 上做了一个 demo。 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#myModal").modal(); }); </script> </body> </html> 在调用函数时尝试使用 jQuery 而不是 $ 符号，它在我的例子中有效，如下所示。 jQuery.noConflict(); jQuery('#myModal').modal('show'); jQuery.noConflict(); 因为当 jQuery('#myModal').modal('show'); 时不起作用，这是由于两次包含 jQuery 造成的。包含 jQuery 2 次会使模式无法工作。在这种情况下它会解决问题，就像在我的情况下它正在重复一样。 您还可以访问此链接 通过 JQuery 调用无法显示 Bootstrap 模型窗口 在此处查看完整的解决方案： http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h 确保按所需顺序放置库以获得结果： 1- 第一个 bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js （也就是说 jquery.min.js 必须在 bootstrap.min.js 之前调用） <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 我尝试了几种方法都失败了，但下面的方法对我来说就像一个魅力： $('#myModal').appendTo("body").modal('show'); 尝试 $("#myModal").modal("toggle") 打开或关闭 ID 为 myModal 的模式。 如果上述方法不起作用，则意味着 bootstrap.js 已被其他 js 文件覆盖。 这里有一个解决方案 1:- 将 bootstrap.js 移至底部，以便它将覆盖其他 js 文件。 2:- 确保顺序如下 <script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <!-- Other js files --> <script src="plugins/jQuery/bootstrap.min.js"></script> <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard Form</h2> <input type="text" value=""/> <input type="submit" id="submitButton"/> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 您可以使用下面的代码启动模式。 $(document).ready(function(){ $("#submitButton").click(function(){ $("#myModal").modal(); }); }); 试试这个 myModal1 是模态的 id $('#myModal1').modal({ show: true }); Bootstrap 4.3 - 更多这里 $('#exampleModal').modal(); <!-- Initialize Bootstrap 4 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- MODAL --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> Hello world </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> 试试这个。这对我来说很有效。 function clicked(item) { alert($(item).attr("id")); } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <button onclick="clicked(this);" id="modalME">Click me</button> <!-- Modal --> <div class="modal" id="modalME" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-header"> <h2>Modal in CSS</h2> <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"--> </div> <div class="modal-body"> <p>One modal example here.</p> </div> <div class="modal-footer"> <a href="#close" class="btn">Nice!</a> <!--CHANGED TO "#close"--> </div> </div> </div> </div> <!-- /Modal --> 上述解决方案在 Bootstrap 4.5 中都不适合我。 这是我发现的确保从另一个模态打开的模态放置在顶部的最有效方法。 将其添加到您的 CSS 中： /* Use this for Stacked Modals in BS 4.5 */ .modal:nth-of-type(even) { z-index: 1052 !important; } .modal-backdrop.show:nth-of-type(even) { z-index: 1051 !important; } 只需从 JQuery 调用您的模态： $('#modCommissionItemApplied').modal('show');
在此输入图像描述 代码就在这里 <p><a href="https://i.stack.imgur.com/tjtvn.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3RqdHZuLnBuZw==" alt="enter image description here"/></a> 代码就在这里</p> <pre><code> <div class="row w-100"> <div class="col-lg-6 my-4 offset-lg-1"> <iframe src="#" width="600" height="450" style="border:0;" allowfullscreen="true" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> <div class="col-lg-6 my-4 offset-lg-1"> <div> <h6>This map is embedded in a 6 column layout</h6> <p>Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.</p> <p>This useful feature helps to make your embedded map responsive (<strong>mobile friendly</strong>). You can customize responsive behavior with the use of <a href="https://mdbootstrap.com/docs/standard/layout/breakpoints/">breakpoints</a>.</p> <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve this effect using the <a href="https://mdbootstrap.com/docs/standard/layout/vertical-alignment/">vertical alignment</a> layout option.</p> </div> </div> </div> </code></pre> <p>我希望地图和文字并排显示</p> </question> <answer tick="false" vote="0"> <p>你可以尝试这样的事情</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="6a0805051e191e180b1a2a5f44594458">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="row w-100"> <!-- remove col-lg-6 and add just col class--> <div class="my-4 offset-lg-1 col"> <div> <h6>This map is embedded in a 6 column layout</h6> <p>Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.</p> <p>This useful feature helps to make your embedded map responsive (<strong>mobile friendly</strong>). You can customize responsive behavior with the use of <a href="https://mdbootstrap.com/docs/standard/layout/breakpoints/">breakpoints</a>.</p> <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve this effect using the <a href="https://mdbootstrap.com/docs/standard/layout/vertical-alignment/">vertical alignment</a> layout option.</p> </div> </div> <!-- remove col-lg-6 and add just col class--> <!-- Move or create the div containing the image here--> <div class="my-4 offset-lg-1 col"> <img src="data:image/jpeg;base64,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" alt=""> </div> </div> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="46242929323532342736067368756874">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>
我没有具体的代码示例，只是寻找一般答案。 我知道我的导航栏在移动设备中无法很好地调整大小，那么有没有好的/正确的方法来解决这个问题？有人提到使用 CSS @media
我正在使用Bootstrap。 Bootstrap 定义 a：悬停，a：焦点 { 颜色：#005580； 文本装饰：下划线； } 我有这个链接/CSS-classes ...
如何在按钮单击事件上显示 typeahead.js 下拉数据？
我正在尝试找到一种方法来利用 bootstrap-tagsinput 库和 Bootstrap-3-Typeahead 来创建具有组合框功能的标记输入字段。这样用户就可以看到可用的...
正如您在此屏幕截图中所看到的，添加按钮后文本会变得垂直不对齐（稍高）。我怎样才能避免这种情况？ （引导5） 这是代码： 正如您在此屏幕截图中所看到的，添加按钮后文本会变得垂直不对齐（稍高）。我怎样才能避免这种情况？ （引导5） 这是代码： <div class="container-fluid"> <div class="row"> <h2 class="border-bottom border-dark pt-4">Roles</h2> </div> <div class="card"> <div class="card-header"> <b>Roles</b> </div> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between">Admins <button class="btn btn-sm btn-outline-secondary" type="button">View</button> </li> <li class="list-group-item d-flex justify-content-between">Custom <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button> </li> </ul> </div> </div> 编辑：我还应该将文本包含在 li 内的跨度中以达到良好的效果 为每个 align-items-center 添加类 li <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <h2 class="border-bottom border-dark pt-4">Roles</h2> </div> <div class="card"> <div class="card-header"> <b>Roles</b> </div> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center">Admins <button class="btn btn-sm btn-outline-secondary" type="button">View</button> </li> <li class="list-group-item d-flex justify-content-between align-items-center">Custom <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button> </li> </ul> </div> </div>
在 Angular 中，我有一个 ngForm，里面像往常一样有一些输入，但我在表单内也有一个 ngbAccordion，在不同的面板中有多个输入字段。提交表格时，唯一的
在 HTML 中创建模态框（内容上方带有黑色背景的 div）时，您认为在 div 中放置 HTML 标题时最合适的是什么？： 标题 钛... 在 HTML 中创建模态框（内容上方带有黑色背景的 div）时，您认为将 HTML 标题放在 div 中最合适吗？: <h1>Title</h1> <h5>Title</h5> <div class="modal-title h4">Modal title</div> 在 Bootstrap 网站 他们选择 H5 或 H1。 并且 React Bootstrap 添加了 .h4 类并删除了 HTML 标题： 您认为最正确的是什么？ 是不是有点混乱？我发现有很多差异。 如果我放置 H5 并且我的网站上已经有 H5，这是否正确？ 如果我将 H1 放入我的模态中，并且显然我的主网站上已经有 H1，这样可以吗？ 我们应该根据项目的需要来使用标题吗？ 有没有100%无可争议的真理？ MDN 文档建议不要以这种方式在页面上使用多个 h1 元素： 注意：旧版本的 HTML 标准允许在嵌套分段元素中嵌套多个元素。然而，这从未被认为是最佳实践，现在也不符合要求。阅读更多内容没有文档大纲算法。 我不怀疑这方面有一个标准，并且建议根据页面的其余部分使用最有意义的元素级别。如果您担心语义，您可能需要考虑使用 <dialog> 元素 (docs) 而不是 <div>。
Global.asax： protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RouteConfig.RegisterRoutes(RouteTable.Routes); 映射配置。
使用 jQuery 3.7.0 的 Bootstrap 5.3.0 中移动导航菜单不会折叠
我正在尝试，当在移动视图中单击汉堡包图标时，导航栏列表（菜单、关于、奖项和电话号码）会出现，再次单击时会消失。但每当我...
我有一个 Bootstrap 表，如下所示： 我有一个 Bootstrap 表，如下所示： <table class="table table-striped table-condensed table-bordered"> <tr> <th>User</th> <th>Points</th> </tr> <tr> <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td> <td class="active">{{player.points}}</td> </tr> </table> 在我的 CSS 中，我尝试通过以下方式使表格透明： table{ opacity: 0.3; } 这显然使整个表格变得透明。我怎样才能只让背景透明？我尝试更改background-color:rgba()，但这也不起作用。 感谢您的帮助！ ~地毯嘶嘶声 使用以下样式： table tr td, table tr th{ background-color: rgba(210,130,240, 0.3) !important; } 您需要更改 RGB 部分以匹配您的颜色。属性中的最后一个参数是 alpha 设置，它将使背景透明。 您还必须调整 html 以正确放置结束表格标记。 <table class="table table-striped table-condensed table-bordered"> <tr> <th>User</th> <th>Points</th> </tr> <tr> <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td> <td class="active">{{player.points}}</td> </tr> </table> JS 小提琴： http://jsfiddle.net/Lf9LG/ ::: 更新 - 2023 - BootStrap v5.3 ::: 添加到上面 - 要获得具有透明背景的表格，我必须应用一个单独的类（在您的 css 文件中），如下所示； .table_custom { --bs-table-bg: transparent !important; } 将此“table_custom”添加到代码中的表标记中，如下所示； <table class="table table-sm table_custom"> 适用于具有透明背景的小型表格。 用户 积分
这是我的视图生成的代码示例： t 这是检查器中的样子（b...
jQuery Bootstrap Timepicker 开始和结束时间
我有2个时间选择器，第一个用于开始时间，第二个用于结束时间。 我希望结束时间不应超过开始时间。我不想设置任何默认值，...