Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
有没有一种简单的方法可以编辑或删除使用 Twitter Bootstrap 的 ASP.NET 应用程序顶部的导航栏？ 需要删除“注册”和“登录”链接，并且“申请N...
我有一个 p-dialog，当应用程序在 app.component.html 文件中加载时显示，如下所示。 当应用程序在 app.component.html 文件中加载时，我会显示一个 p 对话框，如下所示。 <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 这将显示应用程序横幅。当此对话框出现时，我必须将背景颜色覆盖为黑色。所以添加了如下CSS。 .p-dialog-mask.p-component-overlay { background-color: #000; } 关闭对话框后，我会看到每个页面的正常显示。页面内有几个删除功能，相应的 html 中有确认代码，如下所示。 <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog> 此确认使用相同的 css .p-dialog-mask.p-component-overlay，因此这又将背景变为黑色。因此，我尝试通过在横幅页面的 p-dialog 中使用 styleClass : background-color: #000; 来删除背景颜色为黑色的 css，如下所示： <div class="banner"> <p-dialog [(visible)]="displayBanner" [modal]="true" [style]="{width: '70vw'}" styleClass="bgColorChange" [baseZIndex]="10000" [showHeader]="false" [draggable]="false" [resizable]="false"> <banner (notify)="onNotify($event)"></banner> </p-dialog> </div> 在CSS中如下： .bgColorChange { background-color: #000; } 但这并没有覆盖CSS，它看起来是正常的背景。 如何为 p-dialog 应用 2 种不同的样式？由于黑色背景仅出现在应用程序横幅中，该横幅在应用程序加载时显示，我想我应该应用于 p-dialog 标签，但它不会生效。 任何意见都将受到高度赞赏。 尝试 p-dialog ::ng-deep .bgColorChange { background-color: #000; }
我想水平显示动态卡片列表。大屏幕为每行 3 x 3，小屏幕则为第 12 列。 我想水平显示动态卡片列表。大屏幕的每行尺寸为 3 x 3，小屏幕的尺寸为整列 12。 <ul class="list-group list-group-horizontal"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul> 。每个列表项仍然是垂直的而不是水平的 <ion-grid> <ion-list class="ion-padding-top"> @for (item of myList; track item.userId) { <ion-row> <ion-card class="col-4"> <ion-avatar> <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" /> </ion-avatar> <ion-card-header> <ion-card-title>Card Title</ion-card-title> <ion-card-subtitle>Card Subtitle</ion-card-subtitle> </ion-card-header> <ion-card-content> Here's a small text description for the card content. Nothing more, nothing less. </ion-card-content> </ion-card> </ion-row> } } </ion-list> </ion-grid> 您可以使用离子网格使您的列响应： <ion-grid> <ion-row> <ion-col size-lg="3" size-md="3" size-sm="12" size="12"> // to make it responsive you can adjust these size values. <ion-card> //your card content here </ion-card> </ion-col> </ion-row> </ion-grid> 有关更多信息，您可以查看文档：Ion-Grid
有没有办法将 bootstrap 与 jquery 3.x 一起使用
我的网站上运行着 Bootstrap 3.3.6 和 jQuery 1.12.4。 随着 jQuery 3.0.0 发布到生产环境中，我将 jQuery 升级到了 jQuery-3.0.0.js。之后，当我运行我的网站时，我得到了这个控制台......
在 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 Modal 弹出，但有一个“有色”页面并且无法交互
我正在使用引导程序来设置模式弹出窗口。单击按钮时，模式对话框将打开，但整个页面略有“着色”，并且我无法与模式交互（该页面本质上
我正在尝试获取一个页脚，如果没有足够的内容，它会粘在浏览器的底部，或者如果有足够的内容，超出浏览范围，它会粘在页面的底部...
Bootstrap 响应式表格在 iOS 设备上无法水平滚动
我有一个带有以下标记的表格： 正如文件...
我的引导模式工作正常。 我的问题是我需要将模态窗口（包括灰色背景）应用到网站的 div 上，而不是应用到正文上。 我有以下的str...
有人使用 select2 4.0 使用 bootstrap 3.x 工具提示吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码： 有人使用 bootstrap 3.x 工具提示获得 select2 4.0 吗？我无法再在 select2 4.0 中显示工具提示（在 3.5.2 中运行良好）。这是 HTML 代码： <select name="xxx" class="select-full tip" title="some_title"> 这是 JavaScript： $('.tip').tooltip({placement: "auto", html: true}); $(".select-full").select2({ width: "100%", }); 但是，select2 元素中不会显示任何工具提示（在“正常”选择中工作正常）。我在这个网站上找到了一些解决方案，但它们只适用于旧的 select2。 检查了近3天的代码后，我发现问题是最有可能是由select2附带的CSS文件中的这一行引起的： .select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} 如果我删除这一行，工具提示可以正常工作，但 select2 元素看起来不太好（显示两个选择而不是一个）。 我还找到了部分解决方案。添加这个额外的代码片段可以解决问题，但只有在 JavaScript 本身定义了 title 时它才有效（如果从 JS 代码中删除“title”元素则不起作用）： $(".select2-container").tooltip({ title: "some static title"}); 添加了实时示例 - https://jsfiddle.net/8odneso7/ 使用引导文档和一些开发工具，我找到了解决方案。 需要在 select2 容器上创建工具提示，因为原始标签被 select2 隐藏了。原始标题属性被重新使用，您可以根据需要在服务器上渲染它。 $(".select2-container").tooltip({ title: function() { return $(this).prev().attr("title"); }, placement: "auto" }); 工作示例：https://jsfiddle.net/8odneso7/2/ 需要放置“auto”，因为顶部的选择和正文之间没有填充/边距，至少在 jsfiddle 中没有。 如果您想删除选项上的工具提示： $(".select2-selection span").attr('title', ''); 在 Bootstrap 5.2.3 和 Select2 4.0.13 中，对早期答案的以下修改通过使用父元素的委托解决了必须等待 Select2 完全初始化的问题： $('#entrySelector').select2({ ... }) .parent().tooltip({ selector: '.select2-container', trigger : 'hover', title: function() { return $(this).prev().attr('title'); } });
需要删除 YouTube 播放器暂停时出现的“.ytp-pause-overlay”
我正在使用名为 Vimuse 的视频播放器 (http://codecanyon.cosmo-coder.com/vimuse/youtube.html)。我需要找到一种方法来删除用户暂停 vi 时出现的“相关/建议视频”...
我有以下代码，$('.modal).modal('show')似乎将html添加到DOM但没有显示。我注意到不透明度已更改为 0.5 这是代码 我有以下代码， $('.modal).modal('show') 似乎将 html 添加到 DOM 但没有显示。我注意到不透明度已更改为 0.5 这是代码 <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> 看起来工作没有问题。您是否记得包含相关的 Bootstrap JS 和 CSS 文件？ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <button data-target="#editMezalta" data-toggle="modal">Open Modal</button> <div class="modal fade" id="editMezalta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
我尝试使用无阴影删除轮廓，但它不起作用还有其他解决方案吗 网页代码 范围示例 我尝试使用无阴影删除轮廓，但它不起作用，还有其他解决方案吗 HTML代码 <label for="customRange1" class="form-label">Example range</label> <input type="range" class="form-range" id="customRange1"> CSS代码 input[type="range"]{ outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } 我通过查看 bootstraps src 中的文件 _custom-forms.scss 得到了答案。 这就是制作实时片段的方式： input[type="range"]:focus::-webkit-slider-thumb { box-shadow: none !important; } input[type="range"]:focus::-moz-range-thumb { box-shadow: none !important; } input[type="range"]:focus::-ms-thumb { box-shadow: none !important; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <label for="customRange1" class="form-label">Example range</label> <input type="range" tabindex="-1" class="form-range" id="customRange1"> 感谢您的回答，它节省了我漫长的搜索时间。
bootstrap 如何在其文档中的 div 上创建“示例”选项卡？
我尝试查看代码，但无法确定如何将其放置在 div 上方。另外，谷歌搜索“div 上的选项卡”、“div 上的嵌套选项卡”似乎没有显示任何相关内容，所以我的术语...
dataTables - 无法使用水平滚动和固定列来完成其工作。似乎到处渲染都不同。我做错了什么？
我花了几个小时试图弄清楚这一点。我需要制作一张与此链接中显示的表格几乎相同的表格： https://datatables.net/extensions/fixedcolumns/ W...
Bootstrap Modal 在通过 Javascript 触发时未将模态开放类添加到主体
我的页面上有一个模态框，其内容会根据单击两个按钮中的哪一个而发生变化（ 的值会发生变化）。为了更好地添加功能，我设置了一个附加块...
CSS：如何使用 calc(100% - 20px) 获取一个区域来填充除固定宽度元素以外的所有区域？
对于令人费解的标题表示歉意。这是我的小提琴： http://jsfiddle.net/PTSkR/152/ 如果将结果窗格拖得更宽，您可以看到蓝色区域跳起来。他们应该总是...
如何在 Twitter Bootstrap 模式中启用转义键关闭功能？
我按照 Twitter Bootstrap 模式在其主文档页面上的说明进行操作，并使用了提到的 data-keyboard="true" 语法，但转义键不会关闭模式窗口。 ...
我正在使用 2 个模态，第一个模态包含一个表单，第二个模态在表单中发生错误时显示。第二个模式仅包含带有错误消息的文本。 我的问题是，当第二个模式出现时，我预...
我有一个常规的 Bootstrap 3 模式窗口： ... 我有一个常规的 Bootstrap 3 模态窗口： <div id="test_modal" class="modal animated fade" role="dialog" data-keyboard="true" tabindex="-1"> 但在键盘上 ESC 仅在 after 在模态中单击一次后才有效。只需按 ESC 即可让光标消失，只有在“单击”时才会返回。 有人可以向我解释并提出建议吗？ 谢谢。 根据 Bootstrap 3 Modal 文档： 由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中不起作用。要达到相同的效果，请使用一些自定义 JavaScript： $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })