twitter-bootstrap 相关问题

引导导航栏折叠在单击时未关闭

我正在使用 Bootstrap，它在单页网站上折叠了导航栏以及简单的滚动脚本，因此如果我单击单个链接，页面会向下滚动到锚点 - 效果很好。然而

链接到另一个网站上的 Anchor 不起作用（在 Chrome 中测试）

我面临的问题是，如果我在我的锚点所在的网站上，我的锚点似乎可以工作： 我面临的问题是，如果我在我的锚点所在的网站上，我的锚点似乎可以工作： <li role="presentation"> <a aria-controls="k" data-toggle="tab" href="#k" role="tab">K</a> </li> 但是，如果我尝试通过 href 从另一个网站跳转到该网站上的特定部分，则不会。选项卡窗格是在 Bootstrap 中内置的。 domain.com/beamer-lexikon/#k 使超链接导航到该页面，但不导航到“k”部分。 “k”部分标有 id“k”： <div class="tab-pane fade" id="k" role="tabpanel"></div> 我是不是搞错了什么？ 您知道我可以从哪里开始寻找问题吗？ JavaScript、CSS？ 非常感谢和最诚挚的问候， 删除 Beamer 词典后面的“/”，并确保目标 ID 在您要跳转到的部分中声明。 除此之外，如果没有看到你的代码，就很难判断。 domain.com/beamer-lexikon#k 我发现Bootstrap框架不支持这种锚链接。解决方案是在文档就绪函数中锚点所在的页面上实现这段代码： if(window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click(); } 最诚挚的问候， 史蒂芬

<img>标签无法渲染图像

我有一些引导卡。单击它们后，我将重定向到另一个页面，在该页面中我使用通过 NavLink 传递的数据并进行渲染。 这是我的代码。 目的地.jsx 我有一些引导卡。单击它们后，我将重定向到另一个页面，在该页面中我使用通过 NavLink 传递的数据并进行渲染。 这是我的代码。 目的地.jsx <div className="row mt-3"> {firstRowData.map((country, index) => ( <div className="col-md-3" key={index}> <NavLink to={`/country/${country.id}`} state={{ data: country.id }} > { Card code } </NavLink> </div> ))} </div> CountryInfo.jsx import React from "react"; import { useLocation} from "react-router-dom"; import countryData from "./data"; function CountryInfo() { const location = useLocation(); let countryId = location.state?.data; if (countryData) { const image1Url = countryData[countryId].images.image1; console.log("Image1 -->", image1Url); return ( <div className=""> <img src={image1Url} alt="" style={{ height: "100vh", width: "100vw" }} /> </div> ); 我有一个包含 json 数据的 data.jsx 文件。 const data = [ { id: 0, name: "Singapore", url: "images/card_singapore.jpg", price: "$ 300", day: 5, images: { image1: "images/new_0.jpg", image2: "images/new_1.jpg", image3: "images/new_2.jpg", image4: "images/new_3.jpg", }, }, // some more data..... 通过下面的代码我可以打印正确的图像地址。 console.log("Image1 -->", image1Url); 但是img标签无法渲染图像。为什么会出现这种情况？ 一个观察： 如果我直接从 contryInfo.jsx 调用 App.js 那么我就可以看到图像。 img标签正确渲染图像 function App() { return ( <BrowserRouter> <CountryInfo /> <Pages /> </BrowserRouter> ); } 图像源路径使用relative路径，因为它们不以"/"字符开头，例如它们是当前 URL 路径“相对”的源。当您在应用程序的根目录渲染 CountryInfo 时，（假设）路径只是 "/"，因此 PUBLIC 目录中的相对路径有效，例如"/public/images/new_0.jpg"，但是当 CountryInfo 在 "/country/:countryId" 上渲染时，图像的来源相对于 this 路径，例如/public/country/0/images/new_0.jpg"。更新数据以使用绝对路径： const data = [ { id: 0, name: "Singapore", url: "/images/card_singapore.jpg", price: "$ 300", day: 5, images: { image1: "/images/new_0.jpg", image2: "/images/new_1.jpg", image3: "/images/new_2.jpg", image4: "/images/new_3.jpg", }, }, ... ]; 或者在渲染时将其添加到图像源字符串之前： function CountryInfo() { const location = useLocation(); const countryId = location.state?.data; if (countryData) { const image1Url = countryData[countryId].images.image1; return ( <div className=""> <img src={`/${image1Url}`} alt="country" style={{ height: "100vh", width: "100vw" }} /> </div> ); ... 附加说明：由于导航时 country.id 已在 URL 路径中使用，因此在路由状态中仅传递 相同的 country.id 值没有任何意义。只需使用路径段即可获取传递的国家/地区 ID。定义路线渲染CountryInfo以具有动态路径段，例如path="/country/:countryId"。示例： function App() { return ( <BrowserRouter> <Routes> <Route path="/country/:countryId" element={<CountryInfo />} /> <Route path="/" element={<Pages />} /> </Routes> </BrowserRouter> ); } <div className="row mt-3"> {firstRowData.map((country) => ( <div className="col-md-3" key={country.id}> <NavLink to={`/country/${country.id}`}> { ...Card code... } </NavLink> </div> ))} </div> import { useParams } from 'react-router-dom'; function CountryInfo() { const countryId = useParams(); const { image1, name } = countryData[countryId]?.images ?? {}; if (image1) { return ( <div className=""> <img src={image1} alt={name} style={{ height: "100vh", width: "100vw" }} /> </div> ); ...

引导导航栏不会向后折叠

我一直在 Laravel 项目中使用 bootstrap 4.3.1，一切都运行良好，但我正在使用的底部导航栏展开一次，不想在移动视图中折叠回来......

如何使用 JavaScript 关闭一个模态框并打开另一个模态框（具有相同的 ID）？

我打开了一个模态窗口（包含分页列表），并且在该模态中我有下一个/上一个按钮，应该显示新内容。 我无法在第一个 m 中包含模态框 next 和 prev 的 HTML 代码...

Bootstrap：关闭模态并通过 javascript 打开另一个模态（具有相同的 id）

我打开了一个模态窗口（包含分页列表），并且在该模态中我有下一个/上一个按钮，应该显示新内容。 我无法在第一个 m 中包含模态框 next 和 prev 的 HTML 代码...

如何在 Bootstrap 3 中的手风琴中显示选择选项

我正在尝试在 Bootstrap 32 手风琴内部使用 Bootstrap Select 插件（请参阅此演示），但 Select 选项隐藏在面板主体内： 我正在尝试在 Bootstrap 32 手风琴内部使用 Bootstrap Select 插件（参见此演示），但 Select 选项隐藏在 panel-body 中： <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> 为什么会发生这种情况，我该如何解决？ 下拉列表的位置问题。 小提琴：http://jsfiddle.net/52VtD/3386/ 只需在下拉列表中添加一个类即可使其位置相对。 .bootstrap-select .dropdown-menu{ position:relative; }

Google 表单未在移动设备上显示完整表单

问题：我的 Google 表单在手机上被截断。最终用户很难理解 iframe 是可滚动的。 我尝试过的：我一直在网上寻找想法。我试过了

我正在尝试根据 youtube 上的教程创建一个 Angular 应用程序，我使用 Bootstrap 模式。单击后“添加部门”按钮不起作用

<button type="button" class="btn btn-primary float-right m-2" data-toggle="modal" data-target= "#exampleModal" (click)= "addClick()" data-backdrop="static" data-keyboard="false">Add Department </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> {{ModalTitle}} </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)= "closeClick()"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <app-add-edit-dep [dep]= "dep" *ngIf= "ActivateAddEditDepComp"></app-add-edit-dep> </div> </div> </div> </div> <table class="table table-striped"> <thead> <tr> <th>DepartmentId</th> <th>Department Name</th> <th>Options</th> </tr> </thead> <tbody> <tr *ngFor="let dataItem of DepartmentList"> <td>{{dataItem.DepartmentId}}</td> <td>{{dataItem.DepartmentName}}</td> <td> <button type="button" class="btn btn-light mr-1"> Edit </button> <button type="button" class="btn btn-light mr-1"> Delete </button> </td> </tr> </tbody> </table> 你必须定义你的模式。您可以将其添加到 html 中，就像它是一个组件一样，或者您可以在 name.component.ts 中激活它。 第一个示例（从未使用过） <modal-component #example-modal></modal-component> 第二个例子（我一直用这个） HTML <button type="button" class="your class" (click)="this.openModal($event)"></button> TS openModal($event) { const modalRef = this.modalService.open(ModalComponent, { scrollable: false, size: 'lg', windowClass: 'your-custom-class', centered: false, backdrop: 'static', }); 文档 --> https://ng-bootstrap.github.io/#/components/modal/examples

无法解析“node_modules/bootstrap/scss/bootstrap”

Parcel编译时，出现此错误： @parcel/core：无法解析“../node_modules/bootstrap/scss/bootstrap” 我的 app.css 文件： @import '../node_modules/bootstrap/scss/bootstrap.scss'; @我...

Bootstrap Datepicker（避免文本输入或限制手动输入）

这是我的网站：http://splash.inting.org/wp/ 我目前在“调用日期”字段中使用 Bootstrap Datepicker（范围分支），效果非常好。 虽然我有两个问题： 1）您可以手动

如何对齐 Bootstrap 导航栏中留下的品牌标题和链接？

我是 Bootstrap 的新手，我一直在努力了解导航栏。我注意到，当浏览器全（宽屏）宽度时，品牌标题和导航锚点保持向左中心...

引导表延伸到容器之外

我正在尝试创建一个简单的表格，其周围有灰色背景，但表格中的线条总是延伸超过 div 容器。我尝试将其放入表格中，但这没有帮助......

如何使用 jQuery 获取要切换的链接文本值？

我有一大块文本，其中一半文本被隐藏。我使用 Bootstrap 5x 切换来显示和隐藏文本块。这很好用。 但是，我也尝试更改按钮文本...

使用 JavaScript 将属性和值添加到元素

我正在为我的网站创建一个深色/浅色主题切换。我在我的网站上使用 Bootstrap 导航栏。我正在使用 JavaScript 事件侦听器来更改主题。我需要更改 Bootstrap 导航栏...

使用 JavaScript 将属性和值添加到元素

我正在为我的网站创建一个深色/浅色主题切换。我在我的网站上使用 Bootstrap 导航栏。我正在使用 JavaScript 事件侦听器来更改主题。我需要更改 Bootstrap 导航栏...

Bootstrap typeahead 无法在 Bootstrap Modal 内工作

我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将其放入 bootstrap 模式时，bootstrap typeahead 将无法工作。有人可以吗...

如何更改select2（引导主题）上选择框的背景颜色

c 的 javascript $(文档).ready(函数() { $('.js-example-basic-single').select2({ 主题：“bootstrap-5” }); }); HTML c 的 javascript $(document).ready(function() { $('.js-example-basic-single').select2({ theme: "bootstrap-5" }); }); HTML <select class="js-example-basic-single bg-dark" style="background-color: #343a40 ! important;" name ="state"></select> 它在街区附近失踪了，这是它目前的样子。我只是找不到改变背景颜色的标签名称。 如果您想查找 HTML 文档中某个元素的标签名称，您可以使用浏览器的开发人员工具进行检查。具体方法如下： 在浏览器中打开您的网页。 右键单击要查找其标签名称的元素。 从上下文菜单中选择“检查”或“检查元素”。这将打开浏览器的开发者工具。 在开发者工具的 HTML 面板中，您将看到所选元素突出显示。元素的标签名称将显示在突出显示的行的开头。 或者，您可以将鼠标悬停在开发人员工具的“元素”面板中的元素上，标签名称将显示在工具提示中。 一旦确定了标签名称，您就可以使用 jQuery 或任何其他方法来定位元素，以修改其样式或属性。

引导列表组不起作用

有人可以向我解释一下为什么这段代码不起作用吗？我得到常规列表项而不是 Bootstrap 列表项...... 测试... 有人可以向我解释一下为什么这段代码不起作用吗？我得到常规列表项而不是 Bootstrap 列表项... <ul class="list-group"> <li class="list-group-item">Test</li> </ul> 我刚刚意识到问题是什么...我不知道列表组是在版本 3 中实现的...我使用的是旧版本... 更新到最新版本后仍然无法使用。

如何使按钮在所有尺寸的显示器上保持一致？

所附图片是两种不同尺寸（24英寸和13英寸）显示器上的按钮，24英寸显示器上的按钮显示正常，而13英寸显示器上的添加到购物车按钮损坏。13英寸显示器b...