bootstrap-4 相关问题

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

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

html css bootstrap-4

回答 3 投票 0

我想将评论的文本放在用户图像下方，如下布局：这是当前的 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 { 文本对齐：右； }

javascript html css bootstrap-4 styling

回答 1 投票 0

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

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

html angular bootstrap-4

回答 0 投票 0

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

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

html css .net bootstrap-4 webforms

回答 1 投票 0

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

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

html css .net bootstrap-4 webforms

回答 1 投票 0

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

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

html css .net bootstrap-4 webforms

回答 1 投票 0

Bootstrap 4.3 不是移动优先

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

html twitter-bootstrap bootstrap-4

回答 1 投票 0

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> 您的导航栏占据了整个宽度，看起来很奇怪。因此，如果您想更改它，只需将容器变小并将其固定或绝对移动到右侧即可。

reactjs bootstrap-4 react-bootstrap

回答 3 投票 0

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

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

twitter-bootstrap bootstrap-4

回答 2 投票 0

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

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

javascript html css forms bootstrap-4

回答 1 投票 0

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

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