bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。

当溢出设置为滚动/自动时，位置粘性不适用于表格标题

我找到了很多解决方案，但没有任何效果，因此再次发布这个问题。我有一张桌子，上面有水平滚动条。我尝试将表头设置为粘性，我可以使用 poition 来做到这一点：

javascript html css angular bootstrap-4

回答 3 投票 0

Bootstrap 4 - 如何将移动模态标题居中？

我是引导程序的初学者。我的网站在 bootstrap 4 下。我有一个在 PC 上的模式，它是左对齐的，这就是我想要的。在移动设备上，我希望标题从左对齐到...

css bootstrap-4

回答 1 投票 0

垂直对齐 div 中的跨度

我正在尝试使用 Bootstrap 4 的对齐辅助类来垂直对齐 div 中的内容“ABC Company”；但无法这样做。我正在使用下面的代码。我正在尝试使用 Bootstrap 4 的对齐辅助类来垂直对齐 div 中的内容“ABC Company”；但无法这样做。我正在使用下面的代码。 <div class="container" style="width: 740px;"> <div class="row"> <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;"> Your Account </div> </div> <div class="row"> <div class="col-sm text-center" style="background-color:#0471AF; height:100px;"> <span class="align-middle">ABC Company</span> </div> </div> 请指出我缺少什么！将display: flex; justify-content: center; align-items: center;或设置为col-sm text-center，或者将display: flex; justify-content: center;设置为col-sm text-center，将align-self: center;设置为<span>。 .col-sm.text-center { display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <style> </style> <div class="row"> <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;"> Your Account </div> </div> <div class="row"> <div class="col-sm text-center" style="background-color:#0471AF; height:100px;"> <span class="align-middle">ABC Company</span> </div> </div> 我尝试使用 CSS flex 来做到这一点，但如果它超出了块（使用“overflow：auto”），它会截断对象。通过实验，我发现如果使用Grid，可以很容易地将任何对象（线或块）居中。我真的很喜欢这个解决方案，所以我在 CMS Effcore 中实现了它。这是一个代码示例： <head> <style> [data-id^='example-'] { max-width: 800px; height: 200px; margin: 20px auto; background: gray; } [data-id^='example-'] img { width: 50px; height: 50px; border: 1px solid black; background: gray; } </style> </head> <body> <div data-id="example-1"> <img src="gallery/pictures/thumbnail-01.png"> </div> <div data-id="example-2"> <img src="gallery/pictures/thumbnail-01.png"> </div> </body> </html> 网格示例： /* ┌─────┬───────────────────────┬─────┐ │ 1fr │ 1fr │ 1fr │ ├─────┼───────────────────────┼─────┤ │ │ ▲ │ │ │ │ ◀┼──────────────────▶ │ │ │ 1fr │ │ 1px|max-content │ 1fr │ │ │ │ │ │ │ │ ▼ │ │ ├─────┼───────────────────────┼─────┤ │ 1fr │ 1fr │ 1fr │ └─────┴───────────────────────┴─────┘ */ [data-id='example-1'] { display: grid; grid-template-columns: 1fr minmax(1px, max-content) 1fr; grid-template-rows : 1fr minmax(1px, max-content) 1fr; } [data-id='example-1'] img { grid-column-start: 2; grid-row-start: 2; } 通过“垂直对齐”示例。 [data-id='example-2'] { text-align: center; white-space: nowrap; } [data-id='example-2']:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } [data-id='example-2'] img { vertical-align: middle; } 可以在此处找到实时代码示例：https://developer.mozilla.org/ru/play?id=Eyc%2BipG68bj%2FU6aDy%2Bk%2BrSo4K0qhZCU6X%2Fk6GwIGyoh5qd88KqDrGBU%2FI%2FwLKPa4%2BnJLhAb%2BA2AjMCFy

html css twitter-bootstrap bootstrap-4

回答 2 投票 0

导航栏中的模态框未打开

我正在使用 Vue 和 Bootstrap 4 创建一个具有模式子组件的导航栏。该模式位于菜单下拉菜单中。当我单击模式时，屏幕会淡出，但我看不到模式。这是...

vue.js bootstrap-4

回答 1 投票 0

单击管理面板侧面菜单会刷新页面，而不是展开菜单项

我在 Angular 11 应用程序中使用的 AdminLTE 管理面板模板面临一个奇怪的问题。它全部加载菜单项。没问题。但是当点击某个项目时会刷新页面

javascript bootstrap-4 adminlte

回答 2 投票 0

使用 jQuery 在 nav-pills 上激活类

我正在开发一个网站，我正在使用带有 bootstrap 4 的 nav-pills 设置。我想在单击时为两个链接添加活动状态，这两个链接使用手风琴将内容放入视图中。我...

jquery bootstrap-4

回答 2 投票 0

如何使用 justify-content 或align-self 使其居中？

这是我的代码，由于某种原因我无法将其居中。我已经尝试过 justify-content 和align-items，对于每一行和每一列类，但它不起作用。我使用的是 4.6 Bootstrap 的 CDN。这个：我...

html bootstrap-4

回答 3 投票 0

即使状态发生变化，StepProgressBar 的内容也会更新

我在NextJs应用程序中使用react-step-progress包来创建一个具有多步骤进度的表单，在我当前的实现中，进入不同的步骤效果很好。问题...

reactjs next.js bootstrap-4

回答 1 投票 0

删除引导图标::之前

我正在动态添加引导程序图标，我希望这些图标出现在新行中。然而结果是图标和文本出现在同一行。看图片这是代码

html css bootstrap-4

回答 1 投票 0

如何在一行中创建 3 个输入？

在我的代码中，我希望每一行只有三个输入字段。但是，当我尝试创建第四个输入字段时，第一个输入字段保留在上一行，而其他三个输入字段...

javascript html bootstrap-4

回答 1 投票 0

安装 Angular-slickgrid 后“JQuery 未定义”抛出错误

首先让我澄清一件事，我已经通过https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step 并遵循了每个强制要求的步骤。无论如何，让我告诉你......

jquery angular bootstrap-4 angular-slickgrid

回答 1 投票 0

Bootstrap 无法在 Docker 中与 Laravel 一起工作

我正在尝试使用 Laravel 进行部署，我已经成功做到了，但是 Bootstrap 样式不起作用，我有一个名为 app.scss 的文件，它必须从其中获取 Bootstrap 导入和样式...

laravel docker docker-compose bootstrap-4 deployment

回答 1 投票 0

如何将 bootstrap 或 tailwind css 名称解析为非 bootstrap 或非 tailwind css 名称

我制作了一个基于 bootstrap 和 tailwind 的 Web 应用程序，但是我不希望在浏览器工具中可见地查看我的 Web 应用程序 UI。所以我想知道是否可以解析顺风CSS na...

bootstrap-4 tailwind-css

回答 2 投票 0

如何使用提交按钮链接页面？

登录这是来自 bootstrap 的示例代码，我如何在此按钮中添加链接，同时保留...

html bootstrap-4 twitter-bootstrap-3 bootstrap-5

回答 1 投票 0

如何将地图移动到右侧而不影响文字？

在此输入图像描述代码就在这里 <p><a href="https://i.stack.imgur.com/tjtvn.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3RqdHZuLnBuZw==" alt="enter image description here"/></a> 代码就在这里</p> <pre><code> <div class="row w-100"> <div class="col-lg-6 my-4 offset-lg-1"> <iframe src="#" width="600" height="450" style="border:0;" allowfullscreen="true" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> <div class="col-lg-6 my-4 offset-lg-1"> <div> <h6>This map is embedded in a 6 column layout</h6> <p>Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.</p> <p>This useful feature helps to make your embedded map responsive (<strong>mobile friendly</strong>). You can customize responsive behavior with the use of <a href="https://mdbootstrap.com/docs/standard/layout/breakpoints/">breakpoints</a>.</p> <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve this effect using the <a href="https://mdbootstrap.com/docs/standard/layout/vertical-alignment/">vertical alignment</a> layout option.</p> </div> </div> </div> </code></pre> <p>我希望地图和文字并排显示</p> </question> <answer tick="false" vote="0"> <p>你可以尝试这样的事情</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="6a0805051e191e180b1a2a5f44594458">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="row w-100">  <div class="my-4 offset-lg-1 col"> <div> <h6>This map is embedded in a 6 column layout</h6> <p>Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.</p> <p>This useful feature helps to make your embedded map responsive (<strong>mobile friendly</strong>). You can customize responsive behavior with the use of <a href="https://mdbootstrap.com/docs/standard/layout/breakpoints/">breakpoints</a>.</p> <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve this effect using the <a href="https://mdbootstrap.com/docs/standard/layout/vertical-alignment/">vertical alignment</a> layout option.</p> </div> </div>   <div class="my-4 offset-lg-1 col"> <img src="data:image/jpeg;base64,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" alt=""> </div> </div> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="46242929323532342736067368756874">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

html twitter-bootstrap bootstrap-4 bootstrap-5

回答 0 投票 0

为什么我输入 6 列，div 却占据 12 列？

我正在尝试使用 col-5 将 4 个 div 分成两列。但当屏幕尺寸较小时，所有 4 个 div 都会占据 12 列，而不是每个 5 列，从而形成一个完整的列。我是新来的

bootstrap-4 grid row

回答 1 投票 0

Bootstrap4 下拉菜单仅在第二次单击时有效

我正在开发一个 django 项目，该项目使用 bootstrap4，我在下拉切换器方面遇到了一些问题。切换器仅在第二个链接之后切换下拉菜单！我做错了什么？

drop-down-menu bootstrap-4

回答 8 投票 0

如何更改 Bootstrap 滑块的颜色

请告诉我如何更改 Bootstrap 滑块的颜色。在我的代码中，我进行了样式更改，但它们没有生效。滑块依然采用经典的白色。 {% 扩展 '

html css bootstrap-4

回答 1 投票 0

如何使用媒体查询更改 Bootstrap 行中的卡片数量？

该 div 包含网页上显示的卡片。当屏幕尺寸是... <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" *ngFor="let card of cards"> 此 div 包含网页上显示的卡片。目前，当屏幕尺寸为 XL 时，将显示 4 张卡片，大 3、中 2、小 1。现在假设我处于最大的屏幕尺寸并开始拖动窗口以使其变小，一切正常，但是，当接近 XL 屏幕尺寸的末尾时，卡片开始水平重叠。在出示 3 张牌和出示 2 张牌之间也会发生这种情况。我使用@media选择器定位了重叠的区域，并将背景颜色设置为红色以进行测试。这就是它的样子： @media (min-width: 1200px) and (max-width: 1450px) { background-color: red; // Test if this is applied } @media (min-width: 990px) and (max-width: 1050px) { background-color: red; } 我的问题是我可以做什么来调整显示的卡片数量，以便在第一个 @media 标签中显示 3 张而不是 4 张卡片。对于第二个 @media 标签，我该怎么做才能显示 2 张而不是 3 张卡片。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">  </div> </div> </div> 更改 col-xl-3 ---> col-xl-4 = 3 列更改 col-lg-4 ---> col-lg-6 = 2 列引导网格有十二列宽。 col-size-x 将显示 12/x 卡。请勿更改媒体查询！

css angular bootstrap-4

回答 1 投票 0

innerhtml 仅在第二次单击时更改

我有一组面板，我想在单击时单独展开，但如果用户单击“展开+”，文本应更改为“折叠”，并且所有面板都应展开。目前...

javascript jquery bootstrap-4

回答 1 投票 0

bootstrap-4 相关问题

最新问题