bootstrap-4 相关问题

Bootstarp 导航栏

我对前端不太了解，因为我主要使用Python后端，但对于我的项目，我仍然需要某种前端来在我的模板中显示数据，所以我使用了bootst...

如何将Bootstrap卡片在网站上以均匀间距居中？

我正在使用 Bootstrap 开发 React 应用程序，我面临着让 Bootstrap 卡在我的网站上以均匀间距居中的挑战。一个ro中的三张卡片之间的空间...

为什么我的 col-8 不在网格系统的中间或完全在中间对齐

我一直在从一些视频中学习如何使用bootstrap4，我正在使用网格系统，但由于某种原因它没有在中间对齐，这是我的代码。有什么我可以改变的或者也许

相同的模态不会在两个单独的文件中弹出

我无法在两个单独的 php 文件中打开一个模式 这是我的模态代码（workerSurveyModal.php） 我无法在两个单独的 php 文件中打开一个模式 这是我的模态代码（workerSurveyModal.php） <!-- Modal of Renew&Update Survey Decision for Worker --> <div class="modal fade" id="workerSurveyDecisionModal" tabindex="-1" role="dialog" aria-labelledby="workerSurveyDecisionModalDecisionModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="workerSurveyDecisionModalLabel">Worker Survey Decision:</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <form method="POST" id="formWorkerSurveyResult" action="action/fn_setData.php?mod=renewSurveyResult"> <div class="modal-body"> <input type="hidden" id="responseId" name="responseId" > <input type="text" id="workerId" name="workerId" > <input type="text" id="contractEndDate" name="contractEndDate" > <div class="form-group"> <label for="response">Worker Survey Decision:</label> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="response" id="responseYes" value="YES" required> <label class="form-check-label" for="responseYes">YES</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="response" id="responseNo" value="NO" required> <label class="form-check-label" for="responseNo">NO</label> </div> </div> <div class="form-group" id="reasonDropdownlist" style="display: none;"> <label for="reason">Reason for Not Renewing:</label> <select class="form-control" name="reason" id="reason" required> <option selected></option> <option>Personal issue</option> <option>Family issue</option> <option>Other reason</option> </select> </div> <!-- Textbox for "Other reason" --> <div class="form-group" id="otherReasonTextbox" style="display:none;"> <label for="otherReason">Please specify Other Reason:</label> <input type="text" class="form-control" name="otherReason" id="otherReason" placeholder="Please specify the reason..."> </div> <br> <!-- Dropdownlist for "destination" --> <div class="form-group" id="destinationDropdownlist" style="display: none;"> <label for="destination">Selected Destination:</label> <select class="form-control" name="destination" id="destination" required> </select> </div> <div class="form-group"> <label for="changeDecision">Allow Worker to Change Decision:</label> <select class="form-control" name="changeDecision" id="changeDecision" required> <option selected></option> <option>YES</option> <option>NO</option> </select> </div> <!-- Textbox for Remarks --> <div class="form-group"> <label for="remarks">Remarks:</label> <textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button> </div> </form> </div> </div> </div> <!-- End of Modal of Renew&Update Survey Decision --> 现在我想在两个单独的 php 文件中调用 Modal tabSurveyPending.php <?php session_start(); require ("workerSurveyModal.php"); ?> tabCompleted.php <?php session_start(); require ("workerSurveyModal.php"); ?> 我只能在一个 php 文件 tabSurveyPending 中调用模式，而在 tabSurveyCompleted 中，模式不会弹出。我无法确定解决方案 任何人都可以帮助我吗？我将非常感谢您的帮助。谢谢你 您面临的问题可能是因为您在两个不同的文件中包含具有相同 ID 的相同模式。当两个文件都包含在同一页面上时，将会有两个具有相同 ID 的模式，这可能会导致问题。 一种解决方案可能是在包含 tabSurveyPending.php 和 tabCompleted.php 的父文件中仅包含一次模态。 如果您需要在两个文件中包含模态，因为它们是单独使用的，您可以考虑根据您在每个文件中设置的变量使模态的 ID 动态化。 这是一个例子： 在你的workerSurveyModal.php： <div class="modal fade" id="<?php echo $modalId; ?>" tabindex="-1" role="dialog" aria-labelledby="<?php echo $modalId; ?>Label" aria-hidden="true"> <!-- rest of your modal code --> </div> 在你的tabSurveyPending.php： <?php session_start(); $modalId = 'workerSurveyDecisionModalPending'; require ("workerSurveyModal.php"); ?> 在你的tabCompleted.php： <?php session_start(); $modalId = 'workerSurveyDecisionModalCompleted'; require ("workerSurveyModal.php"); ?> 这样，模态的每次包含都会有一个唯一的 ID。确保更新触发模式的 JavaScript 代码以使用正确的 ID。

CSS 问题，文本和复选框未对齐

我有一个 css 样式问题，其中文本框和文本未对齐。下面是我的代码。我需要帮助来解决这个问题。 谢谢 我有一个 css 样式问题，其中文本框和文本未对齐。下面是我的代码。我需要帮助来解决这个问题。 谢谢 <div> <input type="checkbox" [checked]="section?.data?.allowMe" class="pointer-events-none" /> <label class="ml-2 view-text" for="allMe" >Allow LostOfData to be Seen</label > </div> 使用 Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/): div { display: flex; align-items: center; }

如何为 jHipster 7 本地加载 css 和字体

我注意到我的项目正在在线加载CSS和字体，所以当我的笔记本电脑离线时，项目加载时没有CSS，我已经搜索了如何在本地加载CSS，但看起来没有太多文档

如何增加 Bootstrap 4 导航栏上导航项目的不透明度？

我正在使用 Bootstrap 4，无论我尝试在代码中调整什么，导航栏中的文本导航项都是半透明的。导航栏的背景颜色是深蓝色...

如何在引导程序中将最后两张卡居中？

我使用引导程序以角度编写应用程序。我希望最后两张牌位于中间，而不是左侧。现在看来最后一张牌不见了。我想纠正它。怎么办？...

Laravel + Bootstrap 图标

我通过命令行 npm i bootstrap-icons 将 bootstrap-icons 添加到我的 Laravel 8 项目中 我已经在 npm install 和 npm run dev 之前运行过以启用 Laravel/UI。 但是当我尝试插入一个简单的 i...

如何使用rowspan和colspan在html中制作表格？

如何在html中构建这个表格？ 我想使用 rowspan 和 colspan 制作表格？ 如何在html中构建这个表格?? 我想使用 rowspan 和 colspan 制作表格？ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <table class="table table-bordered"> <thead> <th>Subject</th> <th>Result</th> </thead> <tbody> <tr> <td>Science</td> <td>Physics</td> <td>Chemistry</td> <td>Other Science</td> <td>Math</td> <td>English</td> </tr> </tbody> </table> 您可以在 MDN 了解 <table> 标签 你可以这样做： table, th, td { border: 1px solid black; border-collapse: collapse; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <table class="table table-bordered"> <thead> <tr> <th colspan="2">Subject</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Science</td> <td>Physics</td> <td>A</td> </tr> <tr> <td>Chemistry</td> <td>A</td> </tr> <tr> <td rowspan="2">Other Science</td> <td>Biology</td> <td>B</td> </tr> <tr> <td>Geography</td> <td>A</td> </tr> <tr> <td colspan="2">Math</td> <td>A+</td> </tr> <tr> <td colspan="2">English</td> <td>A+</td> </tr> </tbody> </table> 这是用 colspan 和 rowspan 设置的 table { border-collapse: collapse; } table, tr, th, td { border: 1px solid #000; } th { padding: 1ex; background: #ccc; } td { padding: 1ex; } .divide td { border-top: 3px solid; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <table class="table table-bordered"> <thead> <th colspan="2">Subject</th> <th>Result</th> </thead> <tbody> <tr> <td rowspan="2" colspan="1" width="100px"> SCIENCE </td> <td> Physics </td> <td>A</td> </tr> <tr> <td> <span>Chemistry</span> </td> <td colspan="1">A</td> </tr> <tr> <td rowspan="2" colspan="1" width="100px"> SCIENCE </td> <td> Physics </td> <td>A</td> </tr> <tr> <td> <span>Chemistry</span> </td> <td colspan="1">A</td> </tr> <tr> <td colspan="2"> SCIENCE </td> <td>A</td> </tr> <tr> <td colspan="2"> SCIENCE </td> <td>A</td> </tr> </tbody> </table> <br> <br> <table> <tr> <th>head</th> <th>title</th> <th>title</th> <th>title</th> <th></th> </tr> <tr> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">white</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">gray</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td>white</td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">gray</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> </table> 我只在问题中的代码中添加了 rowspans、colspans 和其他一些小的编辑，这两行 CSS 只是一个简单的建议，可以根据自己的喜好进行更改。 table{ margin:50px auto; max-width:500px; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <table class="table table-bordered"> <thead> <tr> <th colspan="2">Subject</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Science</td> <td>Physics</td> <td>A</td> </tr> <tr> <td>Chemistry</td> <td>A</td> </tr> <tr> <td rowspan="2">Other<br>Science</td> <td>Biology</td> <td>B</td> </tr> <tr> <td>Geography</td> <td>A</td> </tr> <tr> <td colspan="2">Math</td> <td>A+</td> </tr> <tr> <td colspan="2">English</td> <td>A+</td> </tr> </tbody> </table>

Bootstrap Modal 正在工作，但其提交按钮不起作用

<!DOCTYPE html> <html> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> </head> <div class='dashboard-content'> <div class='container'> <br> <h2 class="blue">Finance Department</h2> <div class="table-responsive text-nowrap"> <table class="table table-striped table-hover table-fixed"> <thead> <tr bgcolor="#196F3D" class="text-white"> <th scope="col" class="text-center">#</th> <th scope="col" class="text-center">Designation</th> <th scope="col" class="text-center">Edit</th> <th scope="col" class="text-center">Delete</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Account Manager</td> <td class="text-center"><a href="#" data-toggle="modal" data-target="#primary0"><button type=button class="font-awesome-btn"> <i class="fa fa-edit" aria-hidden="true"></i> Edit </button></a> <!-- Modal --> <div class="modal fade" id="primary0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form action="/editDesignation" method="post"> <div class="modal-dialog" backdrop="static" keyboard="false"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header modal-header-primary"> <button type="button" class="close order-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span> </button> <h4> <i class="fa fa-edit" aria-hidden="true"></i> Updating Designation </h4> </div> <h3>Please write new value for:</h3> <span class=red>Account Manager</span> <form action="/editDesignation" method="post"> <input type="hidden" name="designationId" value="6"><input type="text" name="designation" value=""> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="submit"> <i class="fa fa-save" aria-hidden="true"></i> Save Changes </button> </form> <button type=button class="font-awesome-btn" data-dismiss="modal"> <i class="fa fa-times" aria-hidden="true"></i> Close </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </td> <td class="text-center"><a href="#" data-toggle="modal" data-target="#danger0"><button type="submit"> <i class="fa fa-trash" aria-hidden="true"></i> Delete </button></a> <!-- Modal --> <div class="modal fade" id="danger0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form action="deleteUrl()" method="post"> <div class="modal-dialog" backdrop="static" keyboard="false"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header modal-header-danger"> <button type="button" class="close order-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span> </button> <h4> <i class="fa fa-check-circle" aria-hidden="true"></i> Are you sure you want to delete </h4> </div> <h3 class=red>Account Manager</h3> <form action="/deleteDesignation" method="post"> <input type="hidden" name="designationId" value="6"> <div> <!-- Modal footer --> <div class="modal-footer"> <button type="submit"> <i class="fa fa-check-circle" aria-hidden="true"></i> Yes </button> </form> <button type=button class="font-awesome-btn" data-dismiss="modal"> <i class="fa fa-times" aria-hidden="true"></i> No </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </td> </tr> </tbody> </table> </div> <br> <br> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </body> </html> 我正在尝试向用户显示引导模式警报以编辑记录。弹出窗口正在打开，但不知道为什么它的提交按钮不起作用。我检查了详细信息，但过去两天一直在解决这个问题。有错误的地方请指教 我无法提交我的问题，因为系统说需要更多解释 感谢期待 请做类似的事情 <button class="btn btn-primary "> /*Your code like icons etc */ 没有像 font-awsome-btn 这样的类。在你已经添加的库中，但在引导程序中你有一个按钮类btn，它的样式可以通过btn-danger红色按钮添加 更多款式看这里

如何使链接只能点击一次

此集合实例上不存在属性 [id_user]。 我想要制作一个场景，在单击链接一次后，该用户将无法再单击该链接 如何使用 if in...

按钮中的图标未注册点击事件

我有一个带有文本和向下箭头图标的按钮，我用它来触发下拉菜单。当我单击按钮的文本部分时，会出现下拉菜单，我有一些 jquery 来修改文本并翻转...

使用 Angular 组件中的 (#myModal).modal('show') 显示 Bootstrap 模态

我有一个使用 bootstrap 的 Angular 8 项目。我试图使用组件的 Typescript 文件中的 $('myModal').modal('show') 显示组件内的模式对话框。 这是我的

当我尝试使用分页符时，它在内部不起作用<tr>，<tbody>[重复]

这是我的代码： {% for child.items %} {%设置 ns.count = ns.count + 1%} 这是我的代码： {% for item in child.items %} {%set ns.count = ns.count + 1%} <tbody style="page-break-inside: avoid"> <tr style="page-break-inside: avoid"> <td style="border-bottom: 1px solid black; border-right: 1px solid black;border-left:1px solid black;">{{ns.count}}</td> <td colspan="3" style=" white-space: normal; border-bottom: 1px solid black; border-right: 1px solid black;">{{item.sales_description}}</td> <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">85177090</td> <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">{{item.qty}}</td> <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">PC</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.rate}}</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.qty * item.rate}}</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0.00</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[0]}}</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[0])/100}}</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[1]}}</td> <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[1])/100}}</td> </tr> </tbody> {% endfor %} 如果该行被破坏，则必须将被破坏的行移动到下一页。但分页符不适用于<tr>，<tbody>。请大家帮帮我 这应该避免行内分页： td, th { page-break-inside: avoid; }

如何在 Bootstrap 网格中正确放置对象

我正在慢慢转向使用 Bootstrap 开发客户端。我完全不明白为什么授权书的比例会变形...我只是想放置徽标和...

如何使用 React 和 Bootstrap 将 JSX 组件在网页上左对齐？

我目前正在开发一个 React 项目，我使用 Bootstrap 来设计我的组件。我有一个 JSX 组件，我想将其与网页左侧对齐，但由于某种原因，它不起作用。

我无法使用脚本在表格视图和网格视图之间切换

<section class="section table-section"> <div class="table-container"> <div class="table-header"> <div class="d-flex align-items-center justify-content-between py-3 px-3" > <div class="d-flex align-items-center"> <i class="fa-solid fa-list-ul p-2"></i> <i class="iconsax p-2" icon-name="grid-apps"></i> </div> <div> <i class="iconsax p-2" icon-name="arrow-up-down"></i> </div> </div> </div> <table class="table"> ... 我这里有一个表格视图。表格标题中有 2 个图标。其中一个是列表图标，另一个是网格图标。 <section class="section grid-section"> <div class="table-container"> <div class="table-header"> <div class="d-flex align-items-center justify-content-between py-3 px-3" > <div class="d-flex align-items-center"> <i class="fa-solid fa-list-ul p-2"></i> <i class="iconsax p-2" icon-name="grid-apps"></i> </div> <div> <i class="iconsax p-2" icon-name="arrow-up-down"></i> </div> </div> </div> <div class="d-flex"> <div class="col-4 card-grid"> ... 这里，我有一个网格形状的布局，有三个并排的网格元素，我用 col-4 调用。与上面相同的标题也在这里。 .grid-section { padding: 1rem 3rem 1rem 3rem; display: none; } grid-section 的 css。 .table-section { padding: 1rem 3rem 1rem 3rem; display: block; } table-section 的 css。 这里，当页面第一次打开时，我说仅显示表格，而不是网格视图。 <script> document.addEventListener("DOMContentLoaded", function () { // Get the list icon and grid icon elements var listIcon = document.querySelector(".fa-solid.fa-list-ul"); var gridIcon = document.querySelector( ".iconsax[icon-name='grid-apps']" ); // Add a click event listener to the list icon listIcon.addEventListener("click", function () { // Show the table view and hide the grid view document.querySelector(".table-section").style.display = "block"; document.querySelector(".grid-section").style.display = "none"; }); // Add a click event listener to the grid icon gridIcon.addEventListener("click", function () { // Show the grid view and hide the table view document.querySelector(".table-section").style.display = "none"; document.querySelector(".grid-section").style.display = "block"; }); }); </script> 最后，在脚本中，如果单击第一个图标，即类为 .fa-solid.fa-list-ul 的图标，我会说显示网格视图。如果单击第二个图标，即类 .iconsax[icon-name='grid-apps']，我说显示网格视图。 。当我单击网格图标时，我可以获得网格视图。但它不会再次单击列表图标。我无法切换回列表视图。 这不起作用的原因是，您有两个包含列表和网格图标的相同 html 标头实例。当您添加事件侦听器时，它仅添加到第一个找到的列表和网格图标。 解决此问题的快速方法是将事件侦听器添加到所有列表和网格图标。 document.addEventListener("DOMContentLoaded", function() { // Get the list icon and grid icon elements var listIcons = document.querySelectorAll(".fa-solid.fa-list-ul"); var gridIcons = document.querySelectorAll( ".iconsax[icon-name='grid-apps']" ); // Add a click event listener to the list icon Array.from(listIcons).forEach(function(listIcon) { listIcon.addEventListener("click", function() { // Show the table view and hide the grid view document.querySelector(".table-section").style.display = "block"; document.querySelector(".grid-section").style.display = "none"; }); }); Array.from(gridIcons).forEach(function(gridIcon) { gridIcon.addEventListener("click", function() { // Show the grid view and hide the table view document.querySelector(".table-section").style.display = "none"; document.querySelector(".grid-section").style.display = "block"; }); }); }); 理想的方法是，您应该只有一个标头实例。

引导程序在网格列中固定位置

我被要求看一些引导程序，我以前没有与 BS 合作过。 我需要改变什么才能实现以下目标： 单击按钮时，我想要两个表，左侧的数据表和选项卡...

引导导航栏折叠切换按钮未单击

为什么我的引导导航栏没有折叠？切换按钮显示，但当我单击它时，没有任何反应。 （用 React 编写，所以使用 className 而不是 class。）我什至尝试复制和粘贴