bootstrap-4 相关问题

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

如果发生情况则生成警报消息，否则显示应用程序

目标：如果发生某种情况（即 URL 路径名中没有数据），我想弹出一个警报组件否则渲染应用程序到目前为止我尝试过的 app.layout = dbc.Container([ dbc.Alert([...

bootstrap-4 callback plotly plotly-dash

回答 2 投票 0

将 div 扩展到屏幕末尾，同时将内容保留在容器内

我正在创建一个导航栏，其中有一个子导航栏。我试图将该子导航的内容保留在容器内，同时将其背景扩展到容器之外（蓝色）。我本来以为...

html css bootstrap-4

回答 1 投票 0

Bootstrap：响应式卡片

我正在尝试使用 bootstrap 从 WIX 重新创建一张像这张卡一样的卡。我有两个问题：仅在全屏时，卡片才会接触接触栏，当我缩小尺寸时，卡片开始浮动...

html css bootstrap-4

回答 1 投票 0

无法使用表格的引导类制作圆角

我正在使用表格引导程序，无法制作圆形边框。由于某种原因，它不会使他们的桌子变圆。我该如何解决这个问题？我正在使用表格引导程序，无法制作圆角边框。出于某种原因，它不会使他们的桌子变圆。我该如何解决这个问题？ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <table class="table table-bordered bg-white rounded"> <thead class="mid-purple-bg rounded-top"> <tr> <th class="col-lg-1 w-50">Code</th> <th class="col-lg-10">Name</th> <th class="col-lg-1 w-50">Plan</th> </tr> </thead> <tbody> <tr class="active-link" style="font-size: 16px;" tabindex="0" ng-reflect-router-link=""> <td>test</td> <td>test2</td> <td>test3</td> </tr> </tbody> </table> 这是我为这个问题找到的答案。 <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container py-5"> <div class="card"> <table class="table table-bordered"> <thead class="mid-purple-bg rounded-top"> <tr> <th class="col-lg-1 w-50">Code</th> <th class="col-lg-10">Name</th> <th class="col-lg-1 w-50">Plan</th> </tr> </thead> <tbody> <tr class="active-link" style="font-size: 16px;" tabindex="0" ng-reflect-router-link=""> <td>test</td> <td>test2</td> <td>test3</td> </tr> </tbody> </table> </div> </div> </body> </html> 我在 div 内的表格上遇到了类似的问题。我首先尝试为 div 提供 rounded 类，但这没有用。最后我发现诀窍是让表格无边框！即给桌子上课程table-borderless rounded确实有效。我不知道这是否适用于每个版本的 bootstrap。

html angular bootstrap-4

回答 2 投票 0

从常见的html元素中识别点击事件

我有一张引导卡，单击它我会将用户重定向到另一个页面。现在我在同一张卡片上添加一些描述，但有一些字符限制。一旦超出字符限制...

javascript html jquery bootstrap-4

回答 2 投票 0

如何设置引导程序多选活动选项背景颜色的样式

我想更改引导程序多选活动选项的背景颜色。由于某种原因，它现在变成了红色。代码：我想更改引导程序多选活动选项的background color。由于某种原因，现在是红色。代码： <select className="form-select my-select" multiple aria-label="My select example" > <option selected>No selection</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> 加载页面后（图1）：当选项被选中且仍处于活动状态时（图 2）：选择并离开后（图3）：如何更改选定的且仍然活动背景颜色（图2）？我尝试过 active 和 focus CSS 样式，但它们对 bg color 没有任何影响： .my-select option:focus, option.focus{ background-color: green !important; } .my-select option:active, option.active{ background-color: green !important; } 图 2 有以下选择器： : 关注选择并 : 选中选项： select.my-select:focus option:checked 您无法设置背景颜色，但您可以考虑应用框阴影，如下所示： box-shadow: 0 0 10px 100px green inset; select.my-select:focus option:checked { box-shadow: 0 0 10px 100px green inset; }

css bootstrap-4 styles background-color

回答 0 投票 0

如何使模板html到表格的第一列分为4个单元格，第二列只有一个单元格？

我使用 html 和 CSS 处理模板。我在使用 html 和 CSS 的设计表模板上遇到问题我在第二行遇到的问题是第一列有 4 个单元格，第二列有一个单元格首先...

javascript html jquery css bootstrap-4

回答 1 投票 0

Django 3.0：如何在同一模板中使用不同的 Boostrap 版本

我在我的django项目中制作了一个Bootstrap 4的模板（Base.html），它可以独立工作。我还制作了另一个模板（Child_Base.html），它是用 Bootstrap 3 和

django bootstrap-4 django-templates

回答 2 投票 0

如何编辑 php 让图像出现在屏幕左侧

我对 php 知之甚少，几乎没有引导程序，但我正在尝试更新 WordPress 模板以调整图像在页面上的显示位置。该网站使用高级自定义字段插件...

php wordpress bootstrap-4 advanced-custom-fields

回答 1 投票 0

如何从引导程序修复移动下拉列表

它应该是什么样子（图片链接）在手机上的显示效果如何下拉菜单增加了手机版本上导航栏的大小。这是一个代码：下拉菜单增加了手机版本上导航栏的大小。这是代码： <div style=" background-image: url(https://i.imgur.com/408H5PI.jpg); background-size: cover; height: 100vh; background-attachment: fixed;"> <div class="sticky d-inline">  <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background: #285123; position: static;"> <a class="navbar-brand" href="/"><img src="https://i.imgur.com/ui7PG0R.png" alt="text bajo" width="50px" height="50px"></img></a> </button> <div class="navbar-expand-lg" id="navbarNavDropdown"> <ul class="navbar-nav navbar-expand-lg"> <li class="nav-item dropdown float-right navbar-expand-lg"> <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Category </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> {% for Category in category%} <a class="dropdown-item" href="{{url_for('get_category', id=Category.id)}}">{{Category.name}}</a> {% endfor %} </div> </li> </ul> </div> </nav> </div> 本来就是这样的，它来自navbar风格。为了防止这种情况，请将 position-absolute 添加到 dropdown-menu 中，这样它就不会拉伸父容器，但这也会使菜单伸出容器，因此还要添加 dropdown-menu-right 以将其保留在容器内。试试这个： <div style=" background-image: url(https://i.imgur.com/408H5PI.jpg); background-size: cover; height: 100vh; background-attachment: fixed;"> <div class="sticky d-inline">  <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background: #285123; position: static;"> <a class="navbar-brand" href="/"><img src="https://i.imgur.com/ui7PG0R.png" alt="text bajo" width="50px" height="50px"></img></a> </button> <div class="navbar-expand-lg" id="navbarNavDropdown"> <ul class="navbar-nav navbar-expand-lg"> <li class="nav-item dropdown float-right navbar-expand-lg"> <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Category </a> <div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> {% for Category in category%} <a class="dropdown-item" href="{{url_for('get_category', id=Category.id)}}">{{Category.name}}</a> {% endfor %} </div> </li> </ul> </div> </nav> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

如何让标签文字左右对齐一致？

我使用 html 和 CSS 处理模板。我面临的问题是我无法使左右对齐标签文本相同。作为例子提交日期和员工 ID 不是从左侧的同一点开始，所以我...

javascript html jquery css bootstrap-4

回答 1 投票 0

在密码输入字段添加并定位眼睛

我正在开发 Node.js 项目。我正在尝试使用 Bootstrap 添加眼睛来输入密码字段以查看它。这是我的输入字段的代码： <... 我正在开发 Node.js 项目。我正在尝试使用 Bootstrap 添加眼睛来输入密码字段以查看它。这是我的输入字段的代码： <div class="container"> <form action='/register' method='post'> <h1 class="text-center">Enter data for form</h1> /* some other fields */ <div class="form-group input-group"> <input class="form-control item" type="password" name="password" id="password" minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$" id="password" placeholder="Password" required autocomplete="off"> <i class="far fa-eye-slash" id="togglePassword"></i> </div> <div class="form-group text-center"> <button class="btn btn-primary btn-block save-info" type="submit">Register </button> </div> </form> </div> 问题实际上出在眼睛的位置上。这是所有必需的 css 样式： .container{ display: flex; align-items: center; justify-content: center; padding:50px 0; } .container form, .hello { max-width:900px; padding:20px 30px; border-radius:10px; box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2); margin: 0 auto; background-color: #FFFACD; } .container .form-group { border-radius:10px; margin-bottom:25px; padding:5px 10px; } .container .save-info { border-radius:20px; padding:10px 20px; font-size:18px; font-weight:bold; background-color:#3f93ff; border:none; color:white; margin-top:10px; } .container .text-center { font-size: xx-large; color:#154360; } #togglePassword { position: relative; /* left: 85%;*/ cursor: pointer; margin-top: 10px; } 所以，我尝试使用这样的togglePassword标识符，我收到了眼睛在输入字段后添加的结果，它看起来很糟糕。我也尝试过这样的代码： #togglePassword { position: absolute; left: 92%; cursor: pointer; margin-top: 10px; } 在这里，当我开始输入密码时，眼睛就消失了，这似乎是错误的逻辑。有人可以提出更好的解决方案或任何想法，让这只眼睛看起来舒适且受人尊敬吗？我应该能够单击它来显示/隐藏密码。您错过了一些有关如何正确使用引导输入组的详细信息。在图标周围添加两个带有 CSS 类 input-group-append 和 input-group-text 的包装器。如果您想在输入组的右侧有一个图标，您的代码应该如下所示（使用 bootstrap 4）： <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"> <div class="input-group-append"> <span class="input-group-text"> <span class="far fa-eye-slash"></span> </span> </div> </div> 您不需要 #togglePassword 的 CSS 代码。

javascript html css bootstrap-4

回答 1 投票 0

如何使用 CSS 和 html 在同一行添加员工姓名和员工 ID？

我从事 asp.net MVC 应用程序。我在同一行添加员工 ID 和员工姓名时遇到问题与所附网页设计完全相同。所以我需要使用 html 和 CSS 修改脚本来添加 Emp.ID 和 aff....

html jquery css asp.net-mvc bootstrap-4

回答 1 投票 0

如何更改react-bootstrap中按钮的颜色？

我知道在react-bootstrap中改变颜色非常困难，但我想让我的按钮颜色不是原色。我怎样才能在 JS/SCSS 中做到这一点？

javascript css reactjs bootstrap-4 react-bootstrap

回答 9 投票 0

问题文本太长时如何换行？

我从事 ASP.NET MVC 工作。我在使用 html、CSS 和 bootstrap 设计页面时遇到问题。我的问题问题8没有换行并且超出了边界。如何使问题文本...