bootstrap-4 相关问题

R bslib 更改导航栏颜色引导版本 5

为什么更改导航栏颜色不适用于闪亮的 BS 版本 4 和 5（版本 1.6.0.9022）？ 可重现的例子： 应用程序R 图书馆（闪亮） 库（bslib） 主题_测试 <- bs_theme(version = 5, ...

bootstrap5中图像的宽度和高度是哪个类？

我在 HTML 页面的标签内添加了一个标签。我需要使用 Bootstrap 类设置图像宽度和高度。我怎样才能做到这一点？有人有想法吗？ 我在下面分享我的代码： 我在 HTML 页面的标签内添加了一个标签。我需要使用 Bootstrap 类设置图像宽度和高度。我怎样才能做到这一点？有人有想法吗？ 我在下面分享我的代码： <div class="col"> <div class="card border border-2 border-danger w-75 mt-3"> <img src="/Images/oppo-a31-2020-128-gb-black-6-gb-ram-.jpg" class="mx-auto d-block img-fluid" style="height:200px; width:200px;" alt="xxx"> <div class="card-body text-center"> <h5 class="card-title">Oppo A13</h5> <p class="card-text" >Our Price: To see product details, add this item to your cart. You can always remove it later.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> 如果你想OVERRIDE Bootstrap，你需要做你正在做的事情：将style="height:200px; width:200px;"添加到你的<img>元素。 否则，对于 Bootstrap 的“默认”图像样式，请查看此处： https://getbootstrap.com/docs/5.0/content/images/ 响应式图片 Bootstrap 中的图像通过 .img-fluid 进行响应。这 应用最大宽度：100%；和高度：自动；到图像，以便它 随父元素缩放。 图像缩略图 除了我们的边界半径实用程序之外，您还可以使用 .img-thumbnail 为图像提供圆形 1px 边框外观。 对齐图像 将图像与辅助浮动类或文本对齐类对齐。 块级图像可以使用 .mx-auto margin 实用程序居中 类。 Sass 变量 变量可用于图像缩略图。 $thumbnail-padding: .25rem; $thumbnail-bg: $body-bg; $thumbnail-border-width: $border-width; $thumbnail-border-color: $gray-300; $thumbnail-border-radius: $border-radius; $thumbnail-box-shadow: $box-shadow-sm;

日期时间选择器无法正常工作日历未显示任何内容

日期和时间选择器不起作用我尝试使用冲突，因为我正在使用带有此和海鸥管理主题的完整日历，但注意到有工作。我该如何解决这个问题？

Bootstrap .btn 在 Safari 上看起来不同

我有这个HTML代码： 取消 ... 我有这个 HTML 代码： <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <a href="poweron.php" type="button" class="btn btn-danger text-white">Power On</a> </div> 这是它在 Safari 和 Chrome 上的样子： 为什么电源按钮看起来“灰色”，并且在 Safari 上大小不同，但在 Chrome 上却按我的预期工作？如何让它看起来和 Google Chrome 上一模一样？ 您可以尝试使用以下代码将此样式添加到您的 <a> 标签中： a[type='button'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

当文本超过 200 个字符时选择选项溢出网页

此选择控制溢出网页 如图所示 仓鼠 此选择控制溢出网页 如图所示 <div> <select id="animalName"> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Lorem ipsum dolor sit amet,consectetuer adipiscing elitAenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu</option> <option value="goldfish">Goldfish</option> </select> </div> 当选择选项溢出页面时，我想使用 CSS 而不是 JavaScript 省略、裁剪或将其划分为多行 注意： 我尝试了这个CSS，但它不起作用 option{ text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: break-word; overflow: hidden; white-space: normal; } 由于您使用的是 bootstrap 4，因此您可以将 bootstrap 的 dropdown 类与 text-truncate 类结合使用。例如： <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="asdf" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu " style="width: 8rem;"> <a class="dropdown-item text-truncate" href="#">Hamster</a> <a class="dropdown-item text-truncate" href="#">Lorem ipsum dolor sit amet,consectetuer adipiscing elitAenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu link</a> <a class="dropdown-item text-truncate" href="#">Goldfish</a> </div> </div>

容器中的 bootstrap 4 导航栏必须具有相同的宽度

我是新手。我正在使用 bootstrap-4 来制作网站。其中菜单顶部和之后必须有滚动的文本以及徽标和名称。 我使用两个容器来做同样的事情。第一名...

停止 Bootstrap 表格拉伸至全屏宽度并向单元格添加额外空间

我有一张桌子，适合最大 600 像素的屏幕。当屏幕尺寸大于 600px 时，表格会增长以填满屏幕，并在每列右侧留出很多额外的间距...

使用 Angular 7 进行 HTML、CSS 中的页眉、内容、页脚设计

我对 HTML、CSS 和 Angular 非常陌生。 我正在尝试创建一个有角度的应用程序，屏幕上有三个主要 div 1.标题 2.内容 3.页脚 这个想法是页面应该被修复并且不能......

引导导航栏扩展被切断（带视频）

我正在制作一个反应应用程序，并通过安装了最新的引导程序 npm 安装引导程序 和 npm 安装引导 jquery 和 npm 安装 jquery popper.js 当窗口我...时我的导航栏工作正常

引导导航栏扩展被切断

我正在制作一个反应应用程序，并通过安装了最新的引导程序 npm 安装引导程序 和 npm 安装引导 jquery 当窗口很宽时，我的导航栏工作正常，但是当您减小......

Bootstrap 4.5 防止导航栏菜单下拉菜单在打开另一个菜单时关闭

我有一个 Bootstrap 4.5 导航栏菜单，已调整为侧边菜单。它工作正常，但是我在菜单中有下拉菜单，当我打开一个下拉菜单时，它会切换关闭另一个下拉菜单...

下拉宽度太大

我正在使用 Bootstrap 4 和 Bootstrap 4 Select Picker 来定义我的下拉菜单。但是，下拉列表的宽度会自动设置为最大文本的宽度。有没有办法手动设置...

在同一行显示两个控件

我想在同一行显示两个控件。目前，一个控件略高于另一控件。我正在使用引导程序来显示控件。下面是我的代码： 我想在同一行显示两个控件。目前，一个控件略高于另一控件。我正在使用引导程序来显示控件。下面是我的代码： <div class="form-group row"> <div class="col-md-6"> <label asp-for="AuditDetails" class="control-label"></label> <select id="ddlAuditDetails" asp-for="AuditDetails" class="form-control"> <option value="4">--Type of Record--</option> <option value="txnNum">Transaction Number</option> <option value="custNum">Customer Number</option> <option value="doc">Fetch by Uploading File</option> </select> <span asp-validation-for="TypeOfRecord" class="text-danger"></span> </div> <div class="col-md-6" id="dvUpload" style="display:none; > @(Html.Kendo().Upload() .Name("files") .Async(a => a .Save("Async_Save", "Audit") .Remove("Async_Remove", "Audit") .AutoUpload(true) ) ) </div> </div> 现在，上面的代码显示了两个控件，如下所示： 如您所见，kendo 控件略高于 select 控件。我希望两个控件位于同一行。我尝试了放置风格： style="display:none;display:flex;flex-direction:column" 在此 div 标签中 <div class="col-md-6" id="dvUpload" > 那没用。剑道控制仍然略高于下拉控制。如何将两个控件放在同一行。这是源上渲染的 HTML： <div class="form-group row"> <div class="col-md-6"> <label class="control-label" for="AuditDetails">Select One of the option</label> <select id="ddlAuditDetails" class="form-control" name="AuditDetails"> <option value="4">--Type of Record--</option> <option value="txnNum">Transaction Number</option> <option value="custNum">Customer Number</option> <option value="docHash">Uploading File</option> </select> </div> <div class="col-md-6" id="dvTransactionNumber" style="display: none;"> <label class="control-label" for="TransactionNumber">Transaction Number</label> <input class="form-control" type="text" id="TransactionNumber" name="TransactionNumber" value="" /> <span class="text-danger field-validation-valid" data-valmsg-for="TransactionNumber" data-valmsg-replace="true"></span> </div> <div class="col-md-6" id="dvCustNumber" style="display: none;"> <label class="control-label" for="CustNumber">Customer Number</label> <input class="form-control" type="text" id="CustNumber" name="CustNumber" value="" /> <span class="text-danger field-validation-valid" data-valmsg-for="CustNumber" data-valmsg-replace="true"></span> </div> <div class="col-md-6" id="dvUpload" style="display:none;display:flex;flex-direction:column"> <input id="files" name="files" type="file" /><script>kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"saveUrl":"/Auditing/Async_Save","removeUrl":"/Auditing/Async_Remove"}});});</script> </div> </div> 您只需添加保证金顶部即可。 mt-1 or mt-2 您可以增加、减少边距顶部

PHPMailer 发送重复的电子邮件

问题：对于每个使用其电子邮件地址注册的用户，我都会收到三封重复的电子邮件。我的来宾列表被重复的电子邮件淹没，我不知道我的代码出了什么问题。

如何使用bootstrap解决水平标签问题

我试图用单行显示水平标签。但它有两条线。 如何用单行显示表单标签。 我试图用单行显示水平标签。但它有两条线。 如何用单行显示表单标签。 <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"> <h2 class="mt32">Bootstrap 4 Horizontal Form</h2> <form class="mt32" action="#"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-2">First Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="fname" placeholder="First name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-2">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lname" placeholder="Last name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-2">Sports</label> <div class="col-sm-10"> <input type="text" class="form-control" id="sportsname" placeholder="Sports name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-2">School Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="sname" placeholder="Shcool name" /> </div> </div> </div> </div> </form> </div> <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> 演示：https://stackblitz.com/edit/angular-9-reactiveform-validation-with-bootstrap-ewjfdm?file=src%2Fapp%2Fapp.component.html 期望标签名称在单行中 问题出在 col-sm-{number}，因此请更改代码的这一部分： <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-2">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lname" placeholder="Last name" /> </div> </div> </div> 对此： <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2"> Last Name </label> <div class="col-sm-7 pl-0"> <input type="text" class="form-control" id="lname" placeholder="Last name" /> </div> </div> </div> 我修改了这一行，每个输入和他的标签必须像这样匹配： <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2"> <div class="col-sm-7 pl-0"> 这是您修改的所有代码： <div class="container"> <h2 class="mt32">Bootstrap 4 Horizontal Form</h2> <form class="mt32" action="#"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2"> First Name</label> <div class="col-sm-8 pl-0"> <input type="text" class="form-control" id="fname" placeholder="First name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2"> Last Name </label> <div class="col-sm-7 pl-0"> <input type="text" class="form-control" id="lname" placeholder="Last name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2" >Sports</label > <div class="col-sm-8 pl-0"> <input type="text" class="form-control" id="sportsname" placeholder="Sports name" /> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="form-group row"> <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2" >School Name</label > <div class="col-sm-7 pl-0"> <input type="text" class="form-control" id="sname" placeholder="Shcool name" /> </div> </div> </div> </div>

如何用css实现文字加粗效果？

我制作了一个小登陆页面，客户想要：“文本、采购和贸易、闭路电视安全。想要使用粗线。 然后一切都会好起来的。”我用谷歌搜索了什么是重画，我必须adm...

使用 HTML 和 CSS 创建自定义组织结构图布局

我正在尝试使用 HTML 和 CSS 创建自定义组织结构图布局，但在实现所需的布局时遇到一些困难。我在下面提供了我当前的代码以及简短的

Antd 响应式输入在屏幕尺寸为“xs”时可以工作

我正在使用react + Antd。无论屏幕有多大，我都试图使输入字段的大小相同。 当屏幕尺寸为“sm”（>= 576px）时，一切正常。 然而，它...

Bootstrap 4 锚链接未指向目标

所以我有一个 bootstrap4 单页索引页面，带有一个导航栏，其中包含跳转到页面正确部分的超链接。 示例：此导航链接转到 id="events: 的部分： 所以我有一个 bootstrap4 单页索引页面，带有一个导航栏，其中包含跳转到页面正确部分的超链接。 示例：此导航链接 转到 id="events: 的部分 <li class="nav-item"><a class="nav-link" href="#events">Events</a></li> <div id="events" class="events-container section-container text-left vents px-md-5"> 我创建了一个具有相同导航栏和链接的单独 contact.php 页面，并使用以下代码从该 contact.php 页面链接到索引页面上的部分： <li class="nav-item"><a class="nav-link" href="index.php#events">Events</a></li> 但是，这不起作用。单击该链接不会执行任何操作。所有列表链接都将链接到index.php 页面，但不会链接到该页面上的特定部分。任何帮助或建议将不胜感激。 花了几个小时修改CSS并删除和添加不同的代码元素之后——最终发现问题是同位素jquery代码——认为它以某种方式干扰了锚链接。我从 contact.php 页面中删除了 isotope.js 文件。我是 javascript 新手，没有意识到 jquery 如何影响其他元素。任何关于覆盖同位素对锚点影响的提示或建议都非常受欢迎:)

在bootstrap 5中获取断点值

我们目前在项目中从Bootstrap4升级到Bootstrap5。 我需要获取 ts/js 中在 BS4 中工作的断点的值 窗户 .getComputedStyle(document.documentElemen...