bootstrap-4 相关问题

bootstrap 4 轮播图像幻灯片事件的功能

我正在使用带有 11 张幻灯片的 Bootstrap 4 轮播，它们按预期工作正常。我有另一个 div (#div-info) 说我希望在其中显示某些文本和一些其他图像按照轮播 sli...

图像未显示在 Django 网站的滑块中

我已完成显示 Django 网站项目的图像滑块的所有必要步骤。但是图像没有显示，没有显示任何错误，我认为我家有一个错误......

活动选项卡未在 HTML、CSS 的垂直选项卡布局中显示在图像上方

我正在开发一个具有垂直选项卡布局的网页，其中每个选项卡对应于一个图像和一些内容。我面临的问题是活动选项卡没有按预期出现在图像上方......

如何让我的 ngDropdown 菜单在悬停而不是单击时工作？

我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ 我正在使用带有 Angular Bootstrap 的模板。当我用鼠标悬停在下拉事件上而不是单击它时，我试图调用下拉事件。我该如何调用这个事件？ <div ngbDropdown class="d-inline-block dropdown"> <a class="navbar-brand" id="dropdownBasic1" href="#basiccomponents" ngbDropdownToggle>Learning</a> <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropdown-primary"> <a class="dropdown-item">Learning Outcomes</a> <div class="dropdown-divider"></div> <a class="dropdown-item">Learning Plan</a> </div> </div> 在 html 模板中为您的 ngbDropdown 创建一个变量（无论名称是什么）： #drop 指定打字稿类型 ngbDropdown #drop="ngbDropdown" 在 ngbDropdown 上的事件 mouseenter 调用该方法： <li ngbDropdown #drop="ngbDropdown" (mouseenter)='over(drop)'> 在 ngbDropdownMenu 上的事件 mouseleave 调用该方法： <div ngbDropdownMenu (mouseleave)='out(drop)'> over(drop:NgbDropdown){ drop.open() } out(drop:NgbDropdown){ drop.close() } <li class="nav-item" ngbDropdown #drop="ngbDropdown" display="dynamic" placement="bottom-end" (mouseenter)='over(drop)' (mouseleave)='out(drop)'> <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button"> Dynamic </a> <div ngbDropdownMenu aria-labelledby="navbarDropdown3" class="dropdown-menu"> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a> <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a> </div> </li> 您可以使用 mouseover 代替 mouseenter，但 mouseenter 更好。 您可以使用 mouseout 代替 mouseleave，但 mouseleave 更好。 dropdown API 有一个 toggle() 方法，以及显式 open() 和 close()。通过绑定到 (mouseenter) 和 (mouseleave) 事件来在悬停时调用它们。 以下是基础知识，这不是完整的示例。您需要提供下拉菜单的参考。 <div ngbDropdown class="d-inline-block dropdown" (mouseenter)="onHover($event)" (mouseleave)="onHover($event)"> ... <div> onHover(event): void { this.myDropDown.toggle(); } 尝试使用带有 mouseleave 和 mouseenter 事件的角度材料。 参考：https://www.thetopsites.net/article/54301126.shtml#:~:text=To%20hide%20menu%2C%20add%20mouseleave%20event%20for%20a%20menu.&text=Demos%20 %3E%20Menu%2C%20Now%20on%20点击，库%20到%20构造%20UI%2FUX。 演示：https://stackblitz.com/edit/example-angular-material-toolbar-menu-wrut3v

在symfony项目中使用yarn安装Bootstrap时出错

我尝试使用yarn命令在我的symfony项目中安装bootstrap 4： 从缓存中获取时出现错误完整性错误 我遵循 symfony 的指导文档：https://symfony.com/doc/current/

了解 Bootstrap 5 变量导入顺序覆盖

我不明白以下情况。我的 app.scss 中有这样的 SCSS 变量导入顺序 @import '~/node_modules/bootstrap/scss/functions'; @import '~/node_modules/bootstrap/scss/var...

模式搜索框中的 select2 无法像禁用一样工作

我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用一样 我有一个模态，它有一个 select2 组件，但它没有按预期工作，搜索框就像被禁用了 <div class="modal fade" id="m_modal_1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 这是我的模态代码 $('#m_modal_1').on('shown.bs.modal', function () { $('#id_golongan').select2({ placeholder: "Pilih Golongan" }) }); 这是我的JS 我已经摆脱了 tabindex="-1" 并使用了 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 但不起作用，如果我使用 dropdownParent: $("#modal_penguasaan") 当我点击时模态消失 我该怎么做才能使当我单击 select2 时模式不会消失并且搜索框正常工作 这就是我解决问题的方法；而不是在模式中删除 tabindex="-1"： 我编写了以下代码，它适用于 Bootstrap 版本 >5.2： $(document).ready(function () { $.fn.modal.Constructor.prototype.enforceFocus = function () {}; $("#single-select-field").select2({ theme: "bootstrap-5", placeholder: "Select a category", allowClear: true, dropdownParent: $("#addModal") //ID of the Modal, }); });

翻译自定义文件输入 Bootstrap 4

我正在使用引导程序并遵循此文档： 我正在使用引导程序并遵循此文档： <div class="custom-file"> <input type="file" class="custom-file-input" id="customFileLang" lang="es"> <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label> </div> $custom-file-text: ( en: "Browse", es: "Elegir" ); 即使添加了 lang="es" 属性，输入文本也不会被翻译。 这里有一个codepen，我缺少什么？ https://codepen.io/anon/pen/ZxGNrw 这是因为 Bootstrap SASS 没有导入到 Codepen 中。您首先需要 @import "bootstrap/functions" （因为这就是 $custom-file-text() 所在的位置），进行更改，最后 @import "bootstrap".... @import "bootstrap/functions"; $custom-file-text: ( en: "Browse", es: "Elegir" ); @import "bootstrap"; 我不知道如何将 Bootstrap SASS 导入 Codepen，但这里有一个 Codeply 上的工作示例：https://www.codeply.com/go/2Mo9OrokBQ 相关问题： Bootstrap 4 文件输入 好吧，实现这一点的最佳方法就是覆盖 CSS 伪类 ::after .custom-file-label::after { content: "Charger";} 如果覆盖 CSS，最好使用“:lang()”选择器仅将标签应用于给定语言： .custom-file-input:lang(fr) .custom-file-label::after { content: "Parcourir"; } 我也有同样的问题。自定义文件标签中的属性数据浏览修复了它： <div class="custom-file"> <input type="file" class="cursor-pointer custom-file-input" accept="image/*" id="foto" name="foto"> <label class="custom-file-label" for="foto" data-browse="Buscar">Seleccione un archivo</label> </div>

Active 类未更改为引导程序中导航栏的项目

我有一个来自引导程序的导航栏，它应该在导航项或单击时的锚元素上添加活动类，但是在浏览器中检查它时它没有改变状态，我不明白为什么......

如何修复评论文本的对齐方式？

我想将评论的文本放在用户图像下方，如下布局： 这是当前的 html： ... 我想将评论的文本放在用户图像下方，如下布局： 这是当前的html： <div class="custom-box"> <div class="comments-container"> <div class="dropdown-container p" onclick="toggleDropdown()" > <span class="mt-1" >التعليقات</span > <span class="arrow mt-1"></span> </div> <div id="dropdownContent" class="dropdown-content" > <h3>إضافة تعليق</h3> <div class="comment-input-container" > <input type="text" id="commentText" class="comment-input" /> </div> <button onclick="addComment()" class="add-comment-button" > أضف </button> <div id="commentsList"></div> </div> </div> </div> 这是造型： .comments-container { padding-bottom: 0px !important; .dropdown-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-radius: 8px; margin-bottom: 20px; cursor: pointer; font-weight: 900; } .dropdown-container:hover { opacity: 0.8; } .dropdown-container .arrow { padding: 15px; border-radius: 3px; height: 50px; color: black; padding-right: 30px; font-size: 14px; position: relative; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='black'/></g></svg>") no-repeat; background-position: right 5px top 50%; } .dropdown-content { display: none; padding: 20px; border-radius: 8px; margin-top: 10px; } .dropdown-content.show { display: block; } .comment-card { display: flex; flex-direction: row; align-items: flex-start; background-color: white; padding: 10px; border-radius: 15px; margin-top: 10px; margin-left: 10px; border: 1px solid #ddd; } .comment-card img { border-radius: 50%; width: 40px; height: 40px; margin-left: 10px; } .comment-content { display: flex; flex-direction: column; flex-grow: 1; } .comment-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-left: 10px; } .comment-header .user-name { font-size: 14px; font-weight: 900; color: #000; } .comment-header .comment-date { font-size: 12px; color: #888; } .comment-text { margin-top: 5px; font-size: 16px; padding-left: 10px; } .add-comment-button { padding: 10px 20px; background-color: #0056b3; color: white; border: none; border-radius: 35px; width: 150px; height: 42px; cursor: pointer; margin-top: 20px; margin-left: 10px; } .add-comment-button:hover { background-color: #004494; } .comment-input-container { display: flex; align-items: center; margin-top: 10px; } .comment-input { flex-grow: 1; border-radius: 10px; border: 1px solid #ddd; padding: 10px; margin-left: 10px; height: 60px; } } 和 JavaScript : <script> document.addEventListener("DOMContentLoaded", function () { addDefaultComment(); // Add a default comment when the page loads keepDropdownOpen(); // Keep the dropdown open by default }); function toggleDropdown() { const dropdownContent = document.getElementById("dropdownContent"); dropdownContent.classList.toggle("show"); } function keepDropdownOpen() { const dropdownContent = document.getElementById("dropdownContent"); dropdownContent.classList.add("show"); // Keep the dropdown open by default } function addComment() { const commentText = document.getElementById("commentText").value; if (commentText.trim() === "") return; createCommentElement(commentText, "زائر"); // Replace "زائر" with actual user name if available document.getElementById("commentText").value = ""; } function createCommentElement(commentText, userName) { const commentList = document.getElementById("commentsList"); const newComment = document.createElement("div"); newComment.classList.add("comment-card"); const userImage = document.createElement("img"); userImage.src = "https://via.placeholder.com/40"; // Placeholder image newComment.appendChild(userImage); const commentContent = document.createElement("div"); commentContent.classList.add("comment-content"); const commentHeader = document.createElement("div"); commentHeader.classList.add("comment-header"); const userNameElement = document.createElement("span"); userNameElement.classList.add("user-name"); userNameElement.innerText = userName; commentHeader.appendChild(userNameElement); const commentDate = document.createElement("span"); commentDate.classList.add("comment-date"); const date = new Date(); commentDate.innerText = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`; commentHeader.appendChild(commentDate); commentContent.appendChild(commentHeader); // Add a line break after the comment header const lineBreak = document.createElement("br"); commentContent.appendChild(lineBreak); const commentTextElement = document.createElement("div"); commentTextElement.classList.add("comment-text"); commentTextElement.innerText = commentText; commentContent.appendChild(commentTextElement); newComment.appendChild(commentContent); commentList.appendChild(newComment); } function addDefaultComment() { const defaultCommentText = "هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!"; createCommentElement(defaultCommentText, "زائر"); } document.getElementById("commentText").addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); // Prevents the default action of the Enter key addComment(); } }); </script> 我应该怎么做才能获得像图像一样的所需输出？ 评论的文本应该从用户图像下方开始，我的输出显示评论的文本在其旁边而不是在其下方，有什么问题？或者我错过了什么？请指出正确的方法 只需将 CSS text-align:right; 应用于 .comment-card 类即可解决该问题。 .comment-card { 文本对齐：右； }

将自定义选项卡/选项卡转换为引导导航选项卡/选项卡时出现问题

我的自定义选项卡/选项卡逻辑

如何在 Web 表单中的 codeBehind 中选择一组元素而不生成包装元素

我有一个Webform页面，其中有一个html表单。一组字段用于客户数据，另一组字段用于产品数据，其他字段都不是这两组字段。 我需要隐藏整个组

如何在 Web 表单中的 codeBehind 中选择一组元素而无需包装元素

我有一个Webform页面，其中有一个html表单。一组字段用于客户数据，另一组字段用于产品数据，其他字段都不是这两组字段。 我需要隐藏整个组

如何在 Web 表单中的 codeBehind 中选择一组元素

我有一个Webform页面，其中有一个html表单。一组字段用于客户数据，另一组字段用于产品数据，其他字段都不是这两组字段。 我需要隐藏整个组

Bootstrap 4.3 不是移动优先

我正在构建一个引导组件以放入客户端站点。他们仍在使用 Bootstrap 4.3。 Bootstrap 应该首先是移动的，但是当我检查我的开发站点时，它正在调用 .col-md

React Bootstrap NavDropdownalignRight 不起作用

我正在使用 React Bootstrap 并尝试将 NavBar 菜单向右对齐 我正在使用 React Bootstrap 并尝试将导航栏菜单向右对齐 <Nav className="ml-auto paddingLeft5" alignRight> <NavDropdown title="Account" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/privacySettings">Privacy Settings</NavDropdown.Item> <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item> </NavDropdown> <NavDropdown title="Help" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item> <NavDropdown.Item href="/termsAndConditions">Terms and Conditions</NavDropdown.Item> </NavDropdown> </Nav> 然而这似乎行不通。我正在使用“react-bootstrap”：“^1.0.0-beta.10”，“react-dom”：“^16.8.4”和“bootstrap”：“^4.3.1”。 结果可以在附图中看到。 我无法将菜单向右对齐，任何帮助将不胜感激。 import { Navbar, Nav, NavDropdown } from 'react-bootstrap' <Nav className="ml-auto"> <NavDropdown alignRight title="Profile" id="collasible-nav-dropdown" > <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> 使用命令 netstat -ntlp 手动终止端口号，然后使用 kill -9 <port number> 并使用 npm start 启动服务器。 今天再次遇到这个问题并想贡献一下： "react-bootstrap": "^2.4.0" "bootstrap": "^5.1.3" 您可以在 NavDropdown 组件中使用 align="end" 属性 <NavDropdown align="end" title="Dropdown" id="nav-add"> <NavDropdown.Item onClick={() => showAddDialog(true)}>Add</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item onClick={() => showAddImageDialog(true)}>Add Image</NavDropdown.Item> </NavDropdown> 参考： 菜单对齐 你可以在 css 或 boostrap 中做一些事情 使用纯CSS你可以创建这些样式 .custom_nav_link{ align-self: flex-end!important; // or text-align: end !important; } 您也可以直接放入这些类 align-self-end` align-self-sm-end //also works with md, lg 如果您将所有内容添加到导航链接，这会将所有内容向右对齐 这给了你这个 这是新的 html <div> <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link className="custom_nav_link" href="#features">Features</Nav.Link> <Nav.Link className="custom_nav_link" href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" className="custom_nav_link" id="collasible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2"> Another action </NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4"> Separated link </NavDropdown.Item> </NavDropdown> </Nav> <div className="searchBar-inline"> <div className="input-group md-form form-sm form-1 pl-0"> <div className="input-group-prepend"> <span className="input-group-text purple lighten-3" id="basic-text1" > <MDBIcon className="text-white" icon="search" /> </span> </div> <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" /> </div> </div> <Nav className="ml-auto paddingLeft5"> <NavDropdown title="Account" className="custom_nav_link" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/privacySettings"> Privacy Settings </NavDropdown.Item> <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item> </NavDropdown> <NavDropdown title="Help" className="custom_nav_link" id="basic-nav-dropdown" alignRight> <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item> <NavDropdown.Item href="/termsAndConditions"> Terms and Conditions </NavDropdown.Item> </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> </div> 您的导航栏占据了整个宽度，看起来很奇怪。因此，如果您想更改它，只需将容器变小并将其固定或绝对移动到右侧即可。

如何在Bootstrap中自定义输入类型文件按钮

我正在制作一个简单的表单，我需要一个按钮来上传一些文件。 我正在使用 bootstrap，我发现制作文件类型的输入字段并为其分配类 l 的典型方法...

单击输入时如何删除按钮上的活动状态

我正在构建一个带有 4 个预设按钮和自定义范围输入的组件。单击按钮时我可以切换按钮上的活动状态，但我想从所有按钮中删除活动状态...

电子邮件验证无法正常工作

在上面的屏幕截图中，即使电子邮件格式无效（不是“gmail.com”格式），也会出现 is-valid 效果。此效果表现为电子邮件箱的绿色轮廓以及 g...

在悬停时激活弹出窗口并单击任意位置关闭

我正在使用 Bootstrap 4，并且想要使用弹出窗口，我可以将鼠标悬停在弹出窗口中以在您单击任意位置时激活并关闭它。 我还想让链接在弹出窗口中工作。任何人都知道如何...