bootstrap-4 相关问题

引导程序中的 net::ERR_ABORTED 500（内部服务器错误）

当我运行该项目时，我在附图中收到错误。 我已经检查过这些文件夹中的文件是否存在，一切都在那里。我不明白如何解决这个问题。 这是...

CKEditor 5 链接弹出窗口未在 Bootstrap 4 Modal 中显示

我在其中设计了一些 Bootstrap 4 Modal，并在其中实现了 CKEditor 5。我的问题是当我尝试打开链接时，链接弹出窗口不显示。 我在谷歌中搜索发现了一些修复，但仍然......

如何更改nuxt中bootstrap 4中b表排序箭头的颜色？

我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。 如何更改排序箭头的颜色？ 我正在使用 nuxt 和 bootstrap，但表格中的默认排序箭头对于我的背景来说太暗了。 如何更改排序箭头的颜色？ <b-table show-empty small striped hover stacked="md" :items="rankingList" :fields="fields" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" > package.json "dependencies": { "@nuxtjs/axios": "^5.3.6", "@nuxtjs/pwa": "^3.0.0-0", "bootstrap-vue": "^2.15.0", "chart.js": "^2.9.4", "chartjs-plugin-zoom": "^0.7.7", "node-sass": "^4.11.0", "nuxt": "^2.0.0", "sass-loader": "^7.1.0", "vue-chartjs": "^3.5.1", "vue-template-compiler": "^2.6.11", "vue2-transitions": "^0.3.0" }, "devDependencies": { "@nuxtjs/eslint-config": "^2.0.0", "@nuxtjs/eslint-module": "^1.0.0", "babel-eslint": "^10.0.1", "eslint": "^6.1.0", "eslint-plugin-nuxt": ">=0.4.2", "vue-cli-plugin-i18n": "^0.5.1" } 解决此问题的一种方法（无论如何都不应该存在，因为在暗表变体中我的箭头是白色的，因此它们是可见的）是覆盖 bootstrap 的 css。 因此对于表格排序箭头 bootstrap 使用以下 3 个 css 无排序 body .table.b-table>tfoot>tr>[aria-sort=none], body .table.b-table>thead>tr>th[aria-sort=none]{ 背景图像：url(“数据：图像/svg+xml，%3csvg xmlns='http://www.w3.org/2000/svg'width='101'height='101'view-box='0 0 101 101'preserveAspectRatio='none'%3e%3cpath fill='red ' 不透明度='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='红色' 不透明度='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e% 3c/svg%3e")！重要； } 排序（升序） body .table.b-table>tfoot>tr>[aria-sort=升序], body .table.b-table>thead>tr>th[aria-sort=升序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'opacity='.3'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 排序（降序） body .table.b-table.table-dark>tfoot>tr>[aria-sort=降序]，body .table.b-table.table-dark>thead>tr>[aria-sort=降序]，body .table.b-table>.thead-dark>tr>[aria-sort=降序]{ 背景图像：url（“数据：图像/ svg + xml，％3csvg xmlns ='http://www.w3.org/2000/svg'宽度='101'高度='101'view-box='0 0 101 101'preserveAspectRatio='无'%3e%3cpath fill='red'不透明度='.3'd='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='red'd='M51 101l25 -23 24-22H1l25 22z'/%3e%3c/svg%3e")！重要； } 如果您注意到每个 css 内部都有一个指向 svg 元素的“background-image”属性。 在每个 svg 元素内，它们被声明为 2 个“路径”元素。 每个路径元素都有一个属性“fill”。 您可以更改属性的值并指向您喜欢的任何颜色。 在上面的例子中我将其设置为 fill="red" 这是一个在 Bootstrap 5+ 上适合我的 css 解决方案。 .bootstrap-table .fixed-table-container .table thead th .both { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAUGVYSWZNTQAqAAAACAACARIAAwAAAAEAAQAAh2kABAAAAAEAAAAmAAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAToAMABAAAAAEAAAATAAAAADKyfrgAAAIwaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTk8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kr+UDfAAAAYZJREFUOBHVUztIA0EQndk7SCJEMbWlNiltrdJJ8AMigqWiQZSIIKRSFBQLQYgJFn5jZ6EoKgatFCSFha2FxEatE9QiiSY7zooHl3MvaSx0Ydid92Ye8wYW4K8erDdY5DTSUJHepddSILY/MP9eq17UIhVXBt8EChhv8uVG69XWnGwoHQ0aEi+IsIWFsoYhOzfCyQc3UdfJiBVEBae/hVR/a7ksJhXuJma4EU/t+ZBAnGPeZ9UgQvDs/vz6du/m0cLst3ay4eOYn/c0SwDN9mJ++yXATDQd9Tjwr1QrJkSxH0h0AFDRGewyVCgbfTqxX8W0yxw5mRpki7uAkl05DglepRzb6k6kHAxobfrMyiEiXQKg90egzEjpPXAKqVwrlgwnS0wsMv9mb2IbeZKwsNO7XIVbNVoxRa53xTNEUGWFgI62e1avrGbn7SqG7NM0ZYIbsqqJ02dp0IrCnSJW7iqmCtTXQaA4x4ckTKTCyTurUXebOtCOvRQCm42eXJspCmt2/H+9PwELW4FbScq8QAAAAABJRU5ErkJggg=='); } .bootstrap-table .fixed-table-container .table thead th .desc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= '); } .bootstrap-table .fixed-table-container .table thead th .asc { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg=='); } 这会将箭头的颜色更改为绿色。

如何根据屏幕尺寸设置bootstrap元素的样式

如何在bootstrap中根据屏幕尺寸改变样式？ 我们必须声明自己的类并根据屏幕尺寸进行更改，还是如何设置元素的样式？ 怎么做？一个...

React中如何限制分页显示的页数？

我正在使用 MERN 堆栈开发一个 Web 应用程序。我已经使用 React 和 Bootstrap 实现了分页。 我想要什么？ 目前，我的数据集有限。所以，我显示的页数...

阻止 Bootstrap 4 页脚上升

我的 bootstrap 4 页脚会在正文内容较少的页面上升起。 下面是问题的图片。 页脚问题 页脚 { 背景颜色：白色； 颜色：#d5d5d5； 填充-t...

Bootstrap4：复选框和标签单击事件

我使用 Bootstrap 来设计我的表单。有一个复选框和一个关联的标签。我的目标是通过单击复选框来更改复选框的值，并能够编辑 la...

列不改变颜色 - Bootstrap 问题？

我尝试更改列名称的颜色，但它保持白色。 看： 我尝试更改列名称的颜色，但它保持白色。 看： <div class="table-responsive"> <button id="exportButton" class="btn btn-primary">Button</button> <table class="table table-bordered table-hover custom-table"> <thead class="thead-light"> <tr> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> </tr> 我添加了：自定义表格然后，我应用了一种样式： .custom-table { background-color: rgb(249, 159, 25); } 未应用颜色。为什么？ 尝试过但没有成功 您实质上所做的是将背景颜色应用于表格。为了查看背景颜色，请确保正确关闭表格标签并可能填充一些数据。 <div class="table-responsive"> <button id="exportButton" class="btn btn-primary">Button</button> <table class="table table-bordered table-hover custom-table"> <thead class="thead-light"> <tr> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> <th class="text-truncate">#1</th> </tr> </thead> <tbody> <td>This is a test.</td> </tbody> </table> </div>

徽标和导航标签重叠

选项卡 #1 和 #2 中的导航栏与徽标重叠。 我尝试了很多次，但无法使其发挥作用。 导航栏必须位于徽标正下方 我懂了： 选项卡 #1 和 #2 中的导航栏与徽标重叠。 我尝试了很多次，但无法使其发挥作用。 导航栏必须位于徽标正下方 我得到了这个： <body> <div class="logo-container"> <img src="{{ url_for('static', filename='logo_me.png') }}" alt="logo_me" height="100" width="200" class="logo"> </div> <div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" onclick="openTab('TAB1')" aria-selected="true">Info</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" onclick="openTab('TAB2')" aria-selected="false" tabindex="-1">Tabla de precios</a> </li> </ul> </div> 款式： ` <style> body { font-family: Arial, sans-serif; margin: 20px; } table { border-collapse: collapse; width: 100%; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .logo-container { position: fixed; top: 0; left: 0; margin: 10px; z-index: 1000 } img.logo { background-color: transparent; padding: 0; margin: 0; border: none; } </style>` 我做错了什么？ 我尝试了很多次都没有成功 问题在于 .logo 容器类中的位置固定。去掉就好了 body { font-family: Arial, sans-serif; margin: 20px; } .container{ display: flex; flex-direction: column; } table { border-collapse: collapse; width: 100%; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .logo-container { /* position: fixed; */ top: 0; left: 0; margin: 10px; z-index: 1000 } img.logo { background-color: transparent; padding: 0; margin: 0; border: none; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <div class="logo-container"> <img src="https://picsum.photos/200/300" alt="logo_me" height="100" width="200" class="logo"> </div> <div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" aria-selected="true">Info</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" aria-selected="false" tabindex="-1">Tabla de precios</a> </li> </ul> </div>

获取 bootstrap vue 分页以使用 REST api

尝试让 Bootstrap Vue 使用 REST api，返回一页数据和记录总数（基于此）： 尝试让 Bootstrap Vue 使用 REST api，返回一页数据和记录总数（基于 this）： <template> </div> <b-pagination v-on:change="onPageChange" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" /> <b-table responsive striped hover show-empty stacked="md" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered"> </b-table> </div> </template> <script> ... export default { name: 'TableList', data() { return { module: null, title: 'Table', items: [], fields: [], errors: [], currentPage: 1, perPage: 15, totalRows: 0, pageOptions: [ 5, 10, 15 ], sortBy: null, sortDesc: false, sortDirection: 'asc', filter: null, } }, created() { ... this.fetch(); }, methods: { fetch() { var me = this; var requestParams = { page: this.currentPage, per_page: this.perPage }; if(this.sortBy) { requestParams = Object.assign({ sort_by: this.sortBy }, requestParams); } Rest('GET', '/table/' + this.table, requestParams, this.$root.user.token) .then(response => { me.items = response.data[1] me.totalRows = response.data[0].total_entries }) .catch(error => { this.errors.push('Error: ' + error.response.status + ': ' + error.response.statusText) }) .finally(() => { //alert('turn off loader!'); }); } } </script> 如果我获取整个表，这个 Vue 就可以工作。但是，当我使用REST api一次返回一页时，计算出的页数为1，并且前进和结束链接处于非活动状态。因此，我无法触发例如以下请求：第 2 页。 REST api 正确返回表中的总行数以及请求的行数，但 Bootstrap Vue 似乎没有对 this.totalRows 的更改进行观察/反应。 我错过了什么？ 您需要将 per-page 组件上的 b-table 属性设置为 0，以禁用本地分页并允许 b-pagination 处理数据。这是一个例子： new Vue({ el: '#app', data() { return { items: [], fields: [{ key: 'postId', label: 'Post ID' }, { key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }, { key: 'body', label: 'Body' } ], currentPage: 0, perPage: 10, totalItems: 0 } }, mounted() { this.fetchData().catch(error => { console.error(error) }) }, methods: { async fetchData() { this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`) .then(res => { this.totalItems = parseInt(res.headers.get('x-total-count'), 10) return res.json() }) .then(items => items) } }, watch: { currentPage: { handler: function(value) { this.fetchData().catch(error => { console.error(error) }) } } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app"> <b-table show-empty :items="items" :fields="fields" :current-page="currentPage" :per-page="0"></b-table> <b-pagination size="md" :total-rows="totalItems" v-model="currentPage" :per-page="perPage"></b-pagination> </div> 您还可以禁用表格中的本地分页，以便您的项目提供者负责控制分页。 我的方法是将 items 提供程序函数注入到 B-Table (:items="fetchData") 的 items 属性中，以便它可以在表状态发生变化时随时运行此函数。 // using TypeScript { methods: { public fetchData( context: { [key: string]: any }, callback: (items: Inspection[]) => void ): null { const params = new URLSearchParams() params.append("page", context.currentPage) params.append("count", context.perPage) params.append("sort", context.sortBy) params.append("sort_order", context.sortDesc ? "DESC" : "ASC") this.$store .dispatch(Actions.FETCH_ITEMS) .then(success => success && callback( this.$store.state.items ?? [] )) return null } } 在本例中，我使用的是 Vuex，调度程序进行 HTTP 调用，并通过突变将其保存在存储中。因此，之后我只需通过商店访问这些项目并将它们传递给回调函数以触发重新渲染。 传入的上下文对象提供表状态，例如当前页面、显示的行、排序列和顺序，因此您应该可以创建一个可以附加到 API 端点的查询字符串。 如果由于某种原因需要手动触发重新渲染，只需在表上使用 ref 并调用刷新方法即可： { methods: { rerender() { this.$refs.table.refresh() } } }

Bootstrap 4 弹出窗口中的输入无法编辑（失去焦点）

我正在使用 Bootstrap 4 和 Bootstrap colorpicker (https://itsjavi.com/bootstrap-colorpicker/) 在弹出窗口中创建一个颜色选择器，其中包含可以在其中设置颜色代码的字段。

html 中开关下的重叠文本

我想在我的网站上添加一个选择器开关，但左侧的标签重叠在开关下方。关于如何解决这个问题以使两个标签（文本）完美分布的任何想法......

Google 表单未在移动设备上显示完整表单

问题：我的 Google 表单在手机上被截断。最终用户很难理解 iframe 是可滚动的。 我尝试过的：我一直在网上寻找想法。我试过了

如何更改引导程序中活动选项卡的颜色

我想创建一个带有选项卡的搜索框，但问题是当我按下选项卡时，活动选项卡不显示任何文本，因为我将颜色设置为白色。我要那个;当我按下按钮时，交流...

无法获取模式来显示口袋妖怪的类型和图像

HTML： ...

Bootstrap form-select：如何在包含两个变量的选项中仅选择一个值？

我有一个包含一组属性的列表，每个属性都有一个编号和一个名称。我已经做到了，所以两者都在我的表单选项中可见 我有一个包含一组属性的列表，每个属性都有一个编号和一个名称。我已经做到了，所以两者都在我的表单选项中可见 <b-col md="3"> <b-form-group :label="$t('departmentNumber')"> <b-form-select vuelidate v-model="$v.consumptionConfiguration.departmentNumber">> <option v-for="property in consumptionConfiguration.properties"> {{ property.propertyNumber + ' ' + '(' + property.name + ')'}} </option> </b-form-select> </b-form-group> </b-col> 但是当用户选择一个选项时，我只希望将 propertyNumber 传递给 v-model。 因此，如果用户选择选项“12345（属性1）”，我只希望输入“12345”。 这可能吗？ 是的，可以通过将 propertyNumber 绑定到 b-form-select 中的 option 元素的值来实现您想要的效果。您可以通过将每个属性上的 v-bind:value 指令设置为 property.propertyNumber 来完成此操作。这样，当用户选择一个选项时，只有 propertyNumber 会传递给 v-model。以下是修改代码的方法： <b-col md="3"> <b-form-group :label="$t('departmentNumber')"> <b-form-select v-model="$v.consumptionConfiguration.departmentNumber"> <option v-for="property in consumptionConfiguration.properties" v-bind:value="property.propertyNumber"> {{ property.propertyNumber + ' (' + property.name + ')' }} </option> </b-form-select> </b-form-group> </b-col>

使用Bootstrap CSS Class如何增加卡片图块

我正在使用 form.IO，它只有一个用于使用 Bootstrap 自定义 CSS 类定位控件的字段。没有 syle 标签 没有 .control{font-size:20px} 您可以使用由空格分隔的多个类 例如：...

我在尝试使用 Bootstrap 创建选项卡时遇到问题[已关闭]

选项卡 1 选项卡 2 <ul class="nav nav-pills"> <li class="active"><a href="">Tab 1 </a></li> <li><a href="">Tab 2</a></li> </ul> <ul class ="nav"> <li class="active" ><a class="nav-link active" (click)="viewMode='map'">Map View</a></li> <li ><a class="nav-link" (click)="viewMode='list'">List View</a></li> </ul> 我用来在 Bootstrap 和 html 中创建选项卡的示例代码已共享。请告诉我你对我该如何进行的想法。 我不确定你想要什么。但我认为你可能是指创建一个导航栏或菜单栏。 但是，你应该更清楚地解释你想要什么。 您需要什么和您期望什么。 .nav-tabs .nav-link.active { background-color: #f8f9fa; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#map-view">Map View</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#list-view">List View</a> </li> </ul> </div>

有没有办法更改为 tempus dominus datetimepicker 设置的图标？

我刚刚开始在 Bootstrap 4.0 中使用 tempusdominus。我让它工作得很好，并且与我的后端很好地集成。但是，我的网站已经在使用图标集（材质图标），我想要...

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功 将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。