Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
我正在使用 MERN 堆栈开发一个 Web 应用程序。我已经使用 React 和 Bootstrap 实现了分页。 我想要什么？ 目前，我的数据集有限。所以，我显示的页数...
我的 bootstrap 4 页脚会在正文内容较少的页面上升起。 下面是问题的图片。 页脚问题 页脚 { 背景颜色：白色； 颜色：#d5d5d5； 填充-t...
我使用 Bootstrap 来设计我的表单。有一个复选框和一个关联的标签。我的目标是通过单击复选框来更改复选框的值，并能够编辑 la...
我尝试更改列名称的颜色，但它保持白色。 看： 我尝试更改列名称的颜色，但它保持白色。 看： <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/) 在弹出窗口中创建一个颜色选择器，其中包含可以在其中设置颜色代码的字段。
我想在我的网站上添加一个选择器开关，但左侧的标签重叠在开关下方。关于如何解决这个问题以使两个标签（文本）完美分布的任何想法......
问题：我的 Google 表单在手机上被截断。最终用户很难理解 iframe 是可滚动的。 我尝试过的：我一直在网上寻找想法。我试过了
我想创建一个带有选项卡的搜索框，但问题是当我按下选项卡时，活动选项卡不显示任何文本，因为我将颜色设置为白色。我要那个;当我按下按钮时，交流...
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>
我正在使用 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; } } 悬停时它将显示没有波纹背景的工具提示。
所以我正在开发一个网络项目，我从其他人创建的 HTML/CSS 模板开始。它似乎使用了我不太了解的引导程序。 在使用 Chrome 开发工具后，我注意到
如何只在切换标签后才加载内容？ 在开始时仅加载 TAB1，然后仅在单击 TAB2 或 TAB3 后加载其内容，但不在开始时加载它们 例子： https://jsfiddle.net/
有没有办法强制 Bootstrap 使第二行的第一列位于前一行中相应列的高度下方？ 目前发生的情况是每个......