bootstrap-4 相关问题

当文本超过 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...

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

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

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

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

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

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

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

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