bootstrap-4 相关问题

当视口发生变化时，很难让一行图像响应式地调整大小

我很难让一行图像随着视口的变化而响应地调整大小。我发现当屏幕变得更窄时图像开始换行，或者有一个 awk...

如果太早打开，为什么我的 Bootstrap 日期选择器会被重复？

我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码 我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码 <div class="hand-date-picker mr-3"> @Html.TextBox("InHandDate", "", new { @class = "datepicker", @group = "inhanddate", @data_date_format = HelperMethods.GetDateFormat(), @data_test_selector = "txtInHandDate" }) <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span> </div> 并在课堂上初始化 $("#InHandDate").datepicker({ //@ts-ignore daysOfWeekDisabled: '0,6' }); $("#InHandDate").datepicker('setDaysOfWeekDisabled', [0, 6]) 并在脚本元素中 $(document).ready(function () { let minDate; if ($("input[class='PickUpShipping']").is(":checked")){ $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("click", function (ev) { let minDate; if ($(this).data('shippingcode') === 'Pickup') { $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $(".CashOnPickup input").prop('checked', false); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("change", function (ev) { $("#InHandDate").datepicker('setDate', ""); }); 我尝试用多种方式来阻止它。但到目前为止还没有运气 显然这是因为没有设置 minDate 属性。添加'@minDate =“”' HTML 解决了问题

Bootstrap 4 和 Angular 展开所有动态添加的手风琴

我正在使用 Bootstrap 4 手风琴编写 Angular 代码，如下所示。 如何添加全部展开和全部折叠按钮？ 我正在使用 Bootstrap 4 手风琴编写 Angular 代码，如下所示。 如何添加全部展开和全部折叠按钮？ <div id="accordion"> <div *ngFor=" let Party of PartyF; let i = index;> <div class="card">6 <div class="card-header"> <button type="button" class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#data' + i" aria-expanded="true" [attr.aria-controls]="'data' + i"> </button> </div> <div [attr.id]="'data' + i" class="collapse" [ngClass]="{ show: i == PartyF.length - 1}" data-parent="#accordion"> <div class="card-body"> </div> </div> </div> </div> <div id="accordion"> <button type="button" class="btn btn-primary mb-2" (click)="expandAll()">Expand All</button> <button type="button" class="btn btn-secondary mb-2" (click)="collapseAll()">Collapse All</button> <div *ngFor="let party of PartyF; let i = index;"> <div class="card"> <div class="card-header"> <button type="button" class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#data' + i" (click)="togglePanel(i)" [aria-expanded]="isPanelOpen(i)" [attr.aria-controls]="'data' + i"> {{ party.title }} </button> </div> <div [attr.id]="'data' + i" class="collapse" [ngClass]="{ show: activePanels.includes(i) }" data-parent="#accordion"> <div class="card-body"> {{ party.content }} </div> </div> </div> </div> </div> 创建一个 activePanels 数组（在组件的 TypeScript 中）来跟踪当前展开的面板。 export class MyAccordionComponent { PartyF = [ // Your party data with title and content properties ]; activePanels: number[] = []; // Initially all closed togglePanel(index: number) { if (this.activePanels.includes(index)) { this.activePanels = this.activePanels.filter(p => p !== index); } else { this.activePanels.push(index); } } expandAll() { this.activePanels = [...Array(this.PartyF.length).keys()]; // Expand all } collapseAll() { this.activePanels = []; // Collapse all } isPanelOpen(index: number): boolean { return this.activePanels.includes(index); } }

Html + Css 在计算机上响应良好（即使在最小化模式下），但在移动设备上响应较差

我为我的asp.net项目使用了现成的模板...... 我对html和Css不太了解，只是通过反复试验删除和定制了一些代码。 为了测试移动响应，我最小化了...

如何为响应速度太快的标题导航栏编写 HTML CSS 代码

我想制作一个导航栏，但我无法为其编写正确的 CSS 样式。 如何制作徽标图像向左浮动、菜单内容向右浮动的导航栏。 我尝试过普通的 CS...

ID 表的引导表数字排序

我正在使用 Boostrap 表来描述我的管理页面中数据库中的表。我将数组保存到 json 文件中，然后进入表并使用以下代码显示它： 我正在使用 Boostrap 表来描述管理页面中数据库中的表。我将一个数组保存到 json 文件中，然后进入表格并使用以下代码显示它： <div class=\"row\"> <div class=\"col-lg-12\"> <div class=\"panel panel-default\"> <div class=\"panel-heading\"> <a href='record_show.php?tselect=blog&typerec=newblog' class='btn btn-success'>Добавить запись</a></div> <table data-toggle=\"table\" data-url=\"tables/data4.json\" data-sort-name=\"id\" data-sort-order=\"desc\" data-show-refresh=\"true\" data-show-toggle=\"true\" data-show-columns=\"true\" data-search=\"true\" data-select-item-name=\"toolbar1\" data-pagination=\"true\" > <thead> <tr> <th data-field=\"id\" data-sortable=\"true\">ID</th> <th data-field=\"header\" data-sortable=\"true\" >Заголовок</th> <th data-field=\"intro\" data-sortable=\"true\" >Введение</th> <th data-field=\"status\" data-sortable=\"true\" >Статус</th> <th data-field=\"seo\" data-sortable=\"true\" >Сео</th> <th data-field=\"type\" data-sortable=\"true\" >Тип</th> <th data-field=\"date\" data-sortable=\"true\" >Дата</th> </tr> </thead> </table> </div> </div> </div> </div> 问题是 Bootstrap 表仅按字母数字排序，即 (1,11,12,2,21,3) 等。您是否有过将 Bootstrap 表强制为数字排序的经验，即(1,2,3, 11,12,21)? 在最新版本的 Bootstrap 表中，我发现了以下内容。 你可以使用 data-custom-sort="customSort" 然后您需要将以下脚本放在所用表格的 HTML 正下方。 function customSort(sortName, sortOrder, data) { var order = sortOrder === 'desc' ? -1 : 1 data.sort(function (a, b) { var aa = +((a[sortName] + '').replace(/[^\d]/g, '')) var bb = +((b[sortName] + '').replace(/[^\d]/g, '')) if (aa < bb) { return order * -1 } if (aa > bb) { return order } return 0 }) }

PhotoSwipe 图像位置受移动设备上 html 中其他 img 元素的影响

我正在尝试在 Bootstrap HTML 页面上使用 PhotoSwipe，我注意到在移动设备上，如果页面中有其他 元素，PhotoSwipe 画廊的图像不会显示出来...

停止验证 React Bootstrap Form 中的 React Form 组件中的一个字段

我有一个反应表单来收集用户的地址。在表格的第一行，我获取用户的第一行地址、道路和郊区。该表单通过“validated”属性验证输入...

如何将角度按钮组件放入引导按钮组中

我有以下按钮组： b2 我有以下按钮组： <div class="btn-group"> <app-remove-button></app-remove-button> <button type="button" class="btn btn-outline-secondary">b2 </button> </div> app-remove-button 是一个带有模板的组件： <button class="btn btn-outline-danger" type="button" ngbTooltip="hint"> <b>&times;</b></button> 这未正确呈现： html 输出为： 我怎样才能让它看起来像： 更改组件的选择器： 应用程序删除按钮 → [应用程序删除按钮] 您现在可以将它用作一个属性（摆脱最终 HTML 中添加的会扰乱您的样式的选择器）： <div class="btn-group"> <button app-remove-button></button> <button type="button" class="btn btn-outline-secondary">b2 </button> </div> 使用以下代码扩展您的引导 CSS： .btn-group > [in-group]:not(:first-child) > .btn { margin-left: -1px; } .btn-group > [in-group]:not(:last-child):not(.dropdown-toggle) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > [in-group]:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } 然后在组件按钮中添加 in-group 属性。 <div class="btn-group"> <app-remove-button in-group></app-remove-button> </div>

Bootstrap 可折叠，不向下推视差

我有一个之前运行的网站，突然我的底部可折叠功能没有将视差向下推，它确实将我的 以及页脚向下推，但不是视差窗口。 /*...

我无法在 Bootstrap 4 中的全宽轮播中使用模态。我应该怎么做才能使其工作？

我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' 我正在尝试在全角轮播中使用模式。它没有按预期正确显示。这是代码。 ''' <div id="carouselExampleControls" class="carousel slide customSlide slides" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active slides slidePadding"> <p class="headline">Team</p> <div class="teamsSlide1"> <div class="gallery-image eventCard teamGroupImgContainer"> <img src="../static/images/Gallery/11.jpg" alt="" class="carousel-img eventCardImg teamGroupImg"> <button class="edit-icon insideEvent insideTeamSlide1" data-toggle="modal" data-target="#teamEdit"> <img src="../static/icons/edit-icon-pen.svg" class="pen"> </button> <!-- Modal --> <div class="modal" id="teamEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal End --> </div> <div class="teamQuote"> <p class="quoteStatemenr">“Coming together is a beginning staying together is progress, working together is success”</p> <p class="quoteAuthor">-Henry Ford</p> </div> </div> </div> <div class="carousel-item slide"> <div class="teamMembersPage1"> </div> </div> <div class="carousel-item slide"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon customArrow leftArrow" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon customArrow" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> ''' 这就是我得到的。模态弹出窗口也获得了淡入淡出效果。我应该怎么做才能使模态像往常一样工作？ 将 z-index="1000" 添加到 .modal-dialog <div class="modal" > <div class="modal-dialog" style="z-index: 1000"> </div> </div>

在创建 React 应用程序时，项目是使用旧的不受支持的工具版本启动的

我想使用这个简单的命令创建一个反应应用程序 npx create-react-app 前端 并收到此警告 注意：该项目是使用不受支持的旧版本工具启动的。 请起来...

在 Boostrap 4 中如何将 toast 的半透明度更改为完全不透明？

我正在使用 Boostrap 4.6（而且我还无法升级到 BS 5）。如何将吐司的半透明更改为完全不透明？ 我的吐司看起来像这样： 我正在使用 Boostrap 4.6（而且我还无法升级到 BS 5）。如何将吐司的半透明更改为完全不透明？ 我的吐司看起来像这样： <div id="help" style="position: fixed; top: 0.5vw; bottom: 0.5vw; right: 10vw;"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto">Help for <%=systemName%></strong> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> hallo <!-- <zero-md src="help/hallswell_all_towers.md"></zero-md> --> </div> </div> </div> 我尝试在 CSS 样式表（在 Bootstrap CSS 之后加载）中添加以下内容： .toast { opacity: 1; } 但这并没有达到预期的效果。 那么，如何改变吐司的半透明度呢？ 您可以使用 !important 覆盖默认的 toast 不透明度 .toast { opacity: 0.5 !important; }

选择2打开下拉菜单后会创建一个大空间

我使用如下选择： $(文档).ready(函数() { $('.select2-多项选择').select2( { placeholder: '选择一个或多个字段' }); }); .select2-

Bootstrap 5 中 data-bs-placement="top" 的工具提示位置太高

最近，我将一个项目从Bootstrap 4升级到5，遇到了工具提示的问题。当我使用左侧、右侧或底部放置时，工具提示完美定位在组件上。然而...

React js 项目中未出现 Bootstrap 图标

我使用以下命令创建了一个反应项目： npx create-react-app 项目 我已经使用 npm 命令安装了 bootstrap 4.3.1，并且还将 bootstrap 导入到了 index.js 文件中 ...

select2 表单控件在 Tab 键切换时不聚焦

尝试在字段上切换时，字段将不会突出显示。我尝试了很多解决方案，例如： .select2-selection__rendered:焦点{ 大纲：无！重要； 框阴影：0px 0px 5px 2px

未捕获类型错误：n 不是带有 Bootstrap 4 下拉列表的构造函数

我的页面中有多个下拉菜单。位于导航内部工作正常，但位于页面内部则不起作用 位于导航内部 页面内部 问题是什么？ 谢谢你。

这个 Bootstrap 4.5 和 Scroll Spy 示例缺少什么？

为什么这个 HTML 片段不起作用？滚动间谍永远不会被激活。 为什么这个 HTML 片段不起作用？滚动间谍永远不会被激活。 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scrollspy with Sticky Navbar</title> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <style> body { position:relative; } </style> </head> <body data-spy="scroll" data-target="#navwrapper"> <div id="navwrapper" class="sticky-top"> <nav class="navbar navbar-light bg-light" id="navbar1"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav flex-column"> <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link" href="#item-3">Item 3</a> <nav class="nav flex-column"> <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a> </nav> </nav> </nav> </div> <div class="row"> <div class="col"></div> <div class="col"> <div style="height: 500px; margin-top: 100px;"> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> <p>...</p> <h5 id="item-1-2">Item 1-2</h5> <p>...</p> <h4 id="item-2">Item 2</h4> <p>...</p> <h4 id="item-3">Item 3</h4> <p>...</p> <h5 id="item-3-1">Item 3-1</h5> <p>...</p> <h5 id="item-3-2">Item 3-2</h5> <p>...</p> </div> </div> </div> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> 查看Codepen Bootstrap 4 需要 jQuery 才能运行，尽管仅将 jQuery 添加到代码中还不足以使其正常工作。我从与您的示例类似的Bootstrap 4 网页复制了代码，并为每个部分添加了一个容器和更多空间，我能够让 Scrollspy 正常工作。 body { position: relative; } p { height: 250px; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <body data-spy="scroll" data-target="#navbar-example3" data-offset="0"> <div class="container"> <div class="row"> <div class="col-4"> <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column position-fixed"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link" href="#item-3">Item 3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a> </nav> </nav> </nav> </div> <div class="col-8"> <div> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> <p>...</p> <h5 id="item-1-2">Item 1-2</h5> <p>...</p> <h4 id="item-2">Item 2</h4> <p>...</p> <h4 id="item-3">Item 3</h4> <p>...</p> <h5 id="item-3-1">Item 3-1</h5> <p>...</p> <h5 id="item-3-2">Item 3-2</h5> <p>...</p> <p>...</p> <p>...</p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body>

Offcanvas 组件不起作用，内容不显示

希望你一切都好！ 我有一个挑战要给你:)。我正在尝试在我的 Angular 项目中实现 Offcanvas 组件，它看起来可以工作，但是当我激活该组件时仅显示阴影