bootstrap-4 相关问题

如何解决 Dashploty 中的重复回调输出错误

在输出回调中： 页面内容.children 输出 0 (page-content.children) 已在使用中。 任何给定的输出只能有一个设置它的回调。 要解决这种情况，请尝试...

Bootstrap 4 - 折叠外的导航栏项目

好吧，我不得不承认，即使在 BS3 中，我也一直在努力正确地工作。但我希望在折叠的容器外部保持持久的导航栏链接。 ...

Bootstrap：使用单个选项卡导航控制多个选项卡面板

我想用一个选项卡导航来控制两个不同的选项卡内容。 在 Bootstra 3 中，我有一个用逗号分隔数据目标的解决方案（如本例所示：https://stackoverflow.com/a/19719859/

Laravel - 自定义 CSS 和 Bootstrap

我有一个刀片文件，其中有一个表正在从执行存储过程的控制器获取值。 当我使用时，问题出在我的刀片文件上 ...

如何根据引导卡中的宽度和高度调整图像？

我想在卡片中给出图像的宽度和高度（300px;300px;）： 我想在卡片中给出图像的宽度和高度（300px;300px;）： <!-- Card Start From Here --> <div class="card" style="width: 35rem;"> <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <!-- Card Start From Here --> 产量缩水了： 如果我删除下面的代码行，那么图像会很长但不会缩小： style="width:35rem;height:20rem;" 我已经尝试过： object-fit:cover;(Check all properties like fill, scale-down) 还尝试了一些CSS： <style> .clsAutofit{ height:300px; width:300px; } .clsImg{ max-width:100%; max-height:100%; } </style> <div class="clsAutofit"> <img src="/demo/img/1.jpeg" class="clsImg" /> </div> <!-- This also not working in card --> 我还尝试了一些属性： <style> img.one { display: block; object-fit: contain; max-width:500px; max-height:280px; width: auto; height: auto; } img.two { object-fit: contain; width: 535px;; height: 535px; } .box { width: 30%; height: 200px; border: 5px dashed #f7a239; } .containerTY { width: 60%; height: 500px; } .containerTYZ { max-width: 100%; } .thumbnail { width: 500px; height: 400px; } .img4R { width: 100%; height: auto; max-width: 50vw; } </style> 我尝试过，但还没成功。 任何想法或建议都欢迎。 你的方法没问题。问题是，引导类属性往往有!important。 因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级， 然后使用： .my-image{ height : 300px !important; width: 300px !important } 将图像与类.my-image绑定，清除内联CSS样式，然后检查这一点。 .clsImg{ max-width:100%; width: 100%; height: auto; object-fit:cover; } 使用 img-fluid 表示图像，您还可以使用 w-25 w-50 w-100 表示 lg、md、sm 等设备 @media (min-width: 768px) { .w-md-50{width:50% !important;} } @media (min-width: 992px) { .w-lg-75{width:75% !important;} } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row pt-5 w-100 mx-auto"> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> <!-- Card Start From Here --> <div class="col-lg-4 col-md-6 col-sm-6 mb-4"> <div class="card p-4"> <div class="row"> <div class="col-6"> <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/> </div> <div class="col-12"> <div class="card-body px-0 pb-0"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> <!-- Card end From Here --> </div> </div>

为什么响应式图像在弹性容器内缩小并且不占据响应式屏幕尺寸上的整个空间？

我想防止图像在弹性盒内收缩，从而在弹性容器内留下太多空间。事实上，图像是使用 Bootstrap 5 类中的 img-fluid 类来制作响应式的......

Bootstrap 4 从下拉按钮中删除插入符号

在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 在 Bootstrap 3 中，您可以轻松地从下拉按钮中删除“插入符号”（向下的小箭头），但我不知道如何在 Bootstrap 4 中执行此操作，因为它们不再使用 <span class="caret"></span>。 <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> 只需删除dropdown-toggle！ 这是一个例子： https://jsfiddle.net/ydnosrLw/ 它是用CSS完成的。做类似的事情： .dropdown-toggle:after { content: none } 您可以通过从元素中删除 dropdown-toggle 类来删除 Bootstrap 4 中的插入符号。所以代替这个： <button class="btn btn-outline-secondary dropdown-toggle" ...> 您的按钮将是 <button class="btn btn-outline-secondary" ...> 这不会有任何副作用，并且它仍然可以作为下拉菜单正常运行。 在 Bootstrap 4 中，您可以通过设置 $enable-caret sass 变量 false 来删除插入符号表单下拉按钮。但您必须在导入 bootstrap sass 文件之前设置此变量。 // Your variable overrides $enable-caret: false // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap"; 我会在电话中正常使用下拉菜单，Apple rimane contornato di blu come se prende il contorno del bottone prima tu. 落下 行动 另一个动作 这里还有其他东西 questo è ili se qualcuno mi dà qualche suggerimento

我正在尝试使用引导程序实现以下目标

点击此处查看图片 两列： [第一列一行（包含第二列两行）] [第二列两行] 我没有引导程序方面的专业知识。你能帮我证明...

Bootstrap 格式中添加的 Div 弄乱了我的布局

在我将每个 H1 分成单独的部分之前，我的代码在右侧有一个图像，请在编辑之前查看页面图片 但现在 iv 分成了 div，图片位于左上角......

Bootstrap 4 与 Angular 17 兼容

我正在从事的项目目前使用的是 Angular 15，我们使用的是 Bootstrap 4.6.2。我们计划在 Angular 17 发布时使用它。 Angular 17 会支持 bootstrap 的版本吗...

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

我很难让一行图像随着视口的变化而响应地调整大小。我发现当屏幕变得更窄时图像开始换行，或者有一个 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 可折叠，不向下推视差

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