bootstrap-4 相关问题

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

我正在制作一个反应应用程序，并通过安装了最新的引导程序 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...

在 bootstrap col 中，内部元素的宽度较大，需要更多的宽度

我试图有两个相同大小的列，其中我可以有大尺寸的嵌套元素，并带有溢出：滚动;。但该列宽度正在变为 100%；有趣的是，如果我添加小宽度...

如何添加多个 Bootstrap 模板而不影响 Angular 中的另一个？

例如，在admin中添加bootstrap模板与为访客添加bootstrap模板是不同的。根据模板添加多个样式时，其中一个会影响另一个，...

修复警告“同时定义标准属性‘box-shadow’以实现兼容性”

我使用scroll库，VSCode显示以下警告： 还定义标准属性“box-shadow”以实现兼容性 我该如何修复它或者至少忽略 VSCode 上的警告？ .scro...

根据引导程序的设备大小在元素上应用边框

我正在使用 bootstrap 创建移动优先响应式布局，并设置各种行和列，并根据不同类别的屏幕尺寸进行调整。 我想知道是否有纯的

更改 Bootstrap Carousel 淡入淡出过渡

Stackoverflow 上有几个关于轮播淡入淡出过渡的问题，但似乎都不适用于默认的 4.0.0 实现： Stackoverflow 上有几个关于轮播淡入淡出过渡的问题，但似乎都不适用于默认的 4.0.0 实现： <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 自 Alpha.6 版本以来，bootstrap 是否改变了 carousel-item -s 的转换方式？在 4.0.0 中如何实现淡入淡出过渡而不是滑动？ Bootstrap 5 轮播淡入淡出（2021 年更新） Bootstrap 5 包括“淡入淡出”效果，只需将 carousel-fade 类添加到轮播即可使用。默认情况下，过渡持续时间为 0.6 秒。要增加持续时间并减慢幻灯片之间的淡入淡出速度，请覆盖 CSS 上的过渡时间... /* change transition duration to control the speed of fade effect */ .carousel-item { transition: transform 2.6s ease-in-out; } .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: opacity 0s 2.6s; } Bootstrap 5 轮播淡出速度较慢 Bootstrap 4.0 Carousel Fade（原始答案） .carousel-fade .carousel-item { opacity: 0; transition-duration: .6s; transition-property: opacity; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right { opacity: 1; } .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; } .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev { transform: translateX(0); transform: translate3d(0, 0, 0); } 淡入淡出效果在 4.0 Beta 期间已从轮播中删除，并且在 4.0.0 中也不可用。这个拉请求表明淡入淡出效果将在4.1或4.2中回归。同时，上述CSS适用于4.0.0 https://codeply.com/go/LhLJlldsLN 要获得淡入效果，您可以将 "carousel-fade" 类添加到 carousel 的主 div 中，如下所示。 更新：Bootstrap 5 Bootstrap 5 与 Bootstrap 4 几乎相同，但 data-ride 属性现在为 data-bs-ride。 Bootstrap 5 示例 <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel"> ... </div> Bootstrap 4 示例 <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> .... </div> 应该在 Bootstrap 4.1 中修复。 https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/ 应该在 bootstrap 5-5.3 中修复吗？ 在 bootstrap 4 中，您可以添加“slide-fade”类，如下所示： <div id="carouselExampleIndicators" class="carousel slide-fade" data-ride="carousel">....</div>

为什么输入的ngbDatepicker会将数字转换为日期？

在此 HTML 代码中，输入数字“2”时，它会自动将其转换为 04.01.2001： 在此 HTML 代码中，输入数字“2”时，它会自动将其转换为 04.01.2001: <div class="input-group"> <input [ngClass]="{'invalid-input': editForm.get('birthDate')!.invalid, 'valid-input': editForm.get('birthDate')!.valid}" #birthDateDp="ngbDatepicker" [disabled]="isAutocomplete" [maxDate]="constants.maxDate" class="form-control form-control-sm" data-cy="birthDate" formControlName="birthDate" id="field_birthDate" name="birthDate" ngbDatepicker placeholder="{{ 'placeholder.birthDate' | translate }}" type="text" /> <button tabindex="-1" (click)="birthDateDp.toggle()" class="btn date-pick btn-secondary" type="button"> <fa-icon icon="calendar-alt"></fa-icon> </button> </div> 我尝试用捕获它的输入 (input)="onDateInput($event, 'birthDate')" 但它返回数字类型的正常输入值。 解决方案：防止 NgbDateParserFormatter 中的输入值条件（value.lenght <= 7, in my case). @Injectable() export class DateInputFormatter extends NgbDateParserFormatter { public parse(value: string): NgbDateStruct | null { if (!value || value.length <= 7) return null; const date = dayjs(value); return { year: date.year(), month: date.month(), day: date.day(), }; } }

Bootstrap 4 悬停在导航栏链接上会导致闪烁

每当我将鼠标悬停在导航栏链接上时，我想让它们具有较暗的背景颜色。它工作正常，但是当我更改填充（在本例中为 0px）时，它开始闪烁：（查看 f...

Reactstrap Bootstrap 导航栏在 React 应用程序中不起作用

我使用“创建反应应用程序”创建了一个反应应用程序。 我现在正在尝试从 Reactstrap 添加导航栏。我从 Reactstrap （我将其添加为一个反应组件）网站复制粘贴： 导入 React...