twitter-bootstrap 相关问题

为什么pe-5 不起作用？为什么pe-5不起作用？ <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <header class="bg-info"> <div class="row text-white"> <div class="col-md-6 p-4 pe-5 "> <h2 class="">Adhnan M Y</h2> </div> <div class="col-md-6"> </div> </div> </header> </body> 也许是因为您正在使用：使用 p-4 进行常规填充，然后使用 pe-5 进行特定填充您的行周围没有所需的 .container 或 .container-fluid 类，因此行间距会导致水平溢出。这可能会给人留下您的填充不存在的印象。 https://getbootstrap.com/docs/5.3/layout/grid/#example <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <header class="container-fluid bg-info"> <div class="row text-white"> <div class="col-md-6 p-4 pe-5 "> <h2 class="">Adhnan M Y</h2> </div> <div class="col-md-6"> </div> </div> </header> </body>

html twitter-bootstrap bootstrap-modal bootstrap-5 padding

回答 2 投票 0

如何通过将鼠标悬停在锚标记内来更改 fontawesome 图标的颜色？

我在导航栏中遇到问题，在里面我放置了简历链接和图标来下载简历，如果我将鼠标悬停在简历上，那么只有简历获取颜色图标不会改变它的颜色，但是......

html css reactjs twitter-bootstrap hover

回答 1 投票 0

如何在 Bootstrap 中正确对齐工具栏？

当您有一个带有几个按钮和一个下拉菜单的工具栏时，如下所示：当您有一个带有几个按钮和下拉菜单的工具栏时，就像这个： <div class="container"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"><a class="btn btn-default" role="button" href="">Invite People</a></div> <div class="btn-group"><a class="btn btn-default" role="button" href="">Create Campaign</a></div> <div class="btn-group"><a class="btn btn-default" role="button" href="">Edit</a></div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div> </div> </div> 如何正确对齐？我尝试了工具栏上的右拉以及按钮组以及一个包含所有按钮的右拉按钮组。这些都不起作用。尝试这样：DEMO <div class="container"> <div class="btn-toolbar pull-right" role="toolbar"> ..... </div></div> Bootstrap pull-right在这里工作正常。在 Bootstrap 5.3.2 中，我使用 justify-content-end，因为上面的其他建议不起作用。示例：https://jsfiddle.net/chdaL9k0/1/ 您可以简单地将“pull-right”类添加到 .btn-toolbar，或者在您的 css 文件中，只需为工具栏提供 float right 属性，如下所示： .btn-toolbar { float: right; }

html css twitter-bootstrap toolbar

回答 3 投票 0

CSS/Bootstrap 5 - 导航链接到侧边栏底部？

我一直在尝试在我创建的侧边栏底部获取这三个导航链接。我无法设法让他们到达那里。我不太确定还能尝试什么。我有

html css twitter-bootstrap navbar bootstrap-5

回答 1 投票 0

bootstrap 5 如果列为空，如何折叠列

如果我的 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

twitter-bootstrap bootstrap-5

回答 1 投票 0

Bootstrap 5 导航栏右对齐项目

如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中，它位于导航栏右侧。在 Bootstrap 4 中，它是 ml-auto。但不适用于 Bootstrap 5。

twitter-bootstrap bootstrap-5

回答 13 投票 0

使用react-bootstrap更改断点处的网格布局

我想在react bootstrap中为12张图像创建一个网格视图。在 md 及以上版本中，图像应排列为 6x2（顶部 6 个，底部 6 个）对于 sm 及以上，它应该是 2x6 对于 xs 来说应该是 1x12...

reactjs twitter-bootstrap react-bootstrap

回答 1 投票 0

如何立即打开Bootstrap 5 Modal然后加载AJAX内容

在加载 AJAX 内容之前，Bootstrap 5 Modal 不会打开。对于我的用户来说，这是一个糟糕的用户体验，因为用户在单击“查看”按钮后必须等待几秒钟才能打开模式！所以话虽这么说

javascript jquery ajax twitter-bootstrap bootstrap-modal

回答 1 投票 0

我希望图像位于 4 列中，但它落入 bootstrap 5 中的其他列中，并且我尝试了 img-responsive img-fluid 但它不起作用

定义的 4 个图像：其中三个图像位于 1 行，但第 4 个图像不断落入另一行我尝试使用 margin o mx-0 或 px-0 但它只会减少其边距而不是其网格 ...

html css twitter-bootstrap responsive-design frameworks

回答 1 投票 0

JQuery/AJAX 切换 POST 到 php 文件，无需导航

我一直在尝试使用多种方法来实现此功能，例如 Javascript 中的 $.ajax 并使用此处找到的 jQuery 插件：http://jquery.malsup.com/form/ 我已经搜索过 stackoverflow 和 goog...

javascript jquery ajax twitter-bootstrap

回答 1 投票 0

如何使用 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>  <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>   <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <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>  <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>  <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();  <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>  <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>  <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>  </div> <div class="modal-body"> <p>One modal example here.</p> </div> <div class="modal-footer"> <a href="#close" class="btn">Nice!</a>  </div> </div> </div> </div>  上述解决方案在 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');

javascript jquery twitter-bootstrap

回答 16 投票 0

如何将地图移动到右侧而不影响文字？

在此输入图像描述代码就在这里 <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">  <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>   <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>

html twitter-bootstrap bootstrap-4 bootstrap-5

回答 0 投票 0

如何制作适合移动设备的引导导航栏？

我没有具体的代码示例，只是寻找一般答案。我知道我的导航栏在移动设备中无法很好地调整大小，那么有没有好的/正确的方法来解决这个问题？有人提到使用 CSS @media

html css twitter-bootstrap

回答 2 投票 0

twitter-bootstrap 相关问题

最新问题