twitter-bootstrap 相关问题

Bootstrap是一个前端框架,旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题,请使用“twitter-bootstrap-2”,“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

CKEditor 5 链接弹出窗口未在 Bootstrap 4 Modal 中显示

我在其中设计了一些 Bootstrap 4 Modal,并在其中实现了 CKEditor 5。我的问题是当我尝试打开链接时,链接弹出窗口不显示。 我在谷歌中搜索发现了一些修复,但仍然......

回答 2 投票 0

为什么 <nav> 导航栏元素放置在容器外部?

我很好奇是否有人知道为什么语义导航栏 元素位于外部 之外? 来自 Bootstrap 导航栏文档 我很好奇是否有人知道为什么语义导航栏<nav>元素位于外部<div class="container">之外? 来自 Bootstrap Navbar 文档 <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> ... </div> ... </nav> 我的理解(我认为)是,为了让 Bootstrap 能够,呃,bootstrap,所有内容都必须位于容器 > row > col 中。 现在已经使用了它一点,我知道有一些警告,并且“它并不总是那么简单”,所以我试图忠实地执行涉及挖掘我的应用程序前端的极其繁琐的工作,同时也了解我的内容正在做。 答案是否像(我的猜测)一样简单,<nav>是一个“特殊”元素,由于其特殊用例(特别是在站点/应用程序范围内导航的情况下)而创建为生活在正常容器“外部”? 我自己采取的步骤: 评论了 10+ 个“类似问题” 在 getbootstrap.com 上花费了时间 检查了w3schools 谷歌搜索"<nav>" “我的理解(我认为)是,为了让 Bootstrap 能够,呃,bootstrap,一切都必须位于容器 > row > col 中” - 为了让 Bootstrap 网格系统正常工作 - 是的。但导航通常一开始并不使用网格系统;大多数情况下,您有一个独立于网格的导航,后面是可能使用网格的主页内容。 – CBroe 1 分钟前 这回答了我的问题。谢谢。 这使得导航栏能够拉伸到全宽 - 其中的 .container 限制了导航元素本身。看看[https://getbootstrap.com/examples/theme/]你会看到深色导航栏条是全角的。 没有什么可以阻止您制作多个全角部分,每个部分都有自己的 .container div。有关示例,请参阅 [https://getbootstrap.com/examples/jumbotron/] - .jumbotron 也有一个子 .container,但背景拉伸到全宽。 此外,.navbar 元素没有什么特别之处,这意味着它必须位于容器外部,如本例所示:[https://getbootstrap.com/examples/carousel/]. 因此,请使用要设置最大宽度的容器并确保网格系统正常工作。

回答 2 投票 0

我可以在没有 Bootstrap 的情况下制作 Modal 吗?

我的任务是创建一个模式,但我被告知在此版本中我无法使用 Bootstrap 库。是否可以在没有 Bootstrap 类的情况下构建模式?如果是的话可以

回答 3 投票 0

无法加载资源 glyphicons-halflings-regular.woff2

我正在我的网站中使用 bootstrap,图标没有显示,在 Web 控制台中它显示为 无法加载资源:服务器响应状态为 404(未找到) http://mywebs...

回答 2 投票 0

为动态生成的 html 代码生成按钮

我正在开发 ASP.NET WebForms 应用程序,并根据 SQL 查询的结果动态生成此 Bootstrap 时间线的 HTML 代码。我想添加删除和修改按钮...

回答 1 投票 0

如何在Bootstrap 5中制作具有多种自定义颜色的复选框开关

如何制作具有自定义颜色的 Bootstrap 5 开关? 我希望某些复选框开关的颜色与默认颜色不同。 我在网上能找到的大多数答案都在讨论如何更改它

回答 1 投票 0

如何在Bootstrap 5中制作具有多种自定义颜色的复选框开关

如何制作具有自定义颜色的 Bootstrap 5 开关? 我希望某些复选框开关的颜色与默认颜色不同。 我在网上能找到的大多数答案都在讨论如何更改它

回答 1 投票 0

在 Angular 中安装离线 Bootstrap

我的电脑上没有任何方式连接互联网,我想在我的 Angular 项目中安装 Bootstrap,方法是下载它并在我的 index.html 中调用它,这样我就可以离线使用它。无法使用 npm i 或...

回答 3 投票 0

引导进度条,将文本放置在“堆叠”栏上

也许我错过了一些简单的东西,但我试图在 Twitter-Bootstrap 的进度栏的堆叠栏上放置一些文本:堆叠栏。 也许我错过了一些简单的东西,但我试图在 Twitter-Bootstrap 的进度栏的堆叠栏上放置一些文本:堆叠栏。 <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 50%"> <span class="sr-only">50%</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20%</span> </div> <div class="progress-bar progress-bar-danger" style="width: 30%"> <span class="sr-only">30%</span> </div> </div> JSFiddle 演示 我只是想让文本显示在堆叠栏的每个部分(50%、20%、30%)上,但我无法找出正确的实现。 根据 Twitter Bootstrap 文档,sr-only 类用于向除屏幕阅读器之外的所有设备隐藏元素。因此,在这种情况下,它会隐藏您想要在除 SR 之外的所有其他设备上显示的标签。 删除该类,它就可以工作了。 更新了 JSFiddle。

回答 1 投票 0

如何在 ngx-bootstrap Accordion 中添加折叠图标

在我使用 ngx-bootstrap 的 Angular 应用程序中,我想添加一个折叠图标,该图标反映手风琴的状态(折叠/展开),如下所示:

回答 4 投票 0

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

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

回答 13 投票 0

链接到另一个网站上的 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(); } 最诚挚的问候, 史蒂芬

回答 2 投票 0

<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> ); ...

回答 1 投票 0

引导导航栏不会向后折叠

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

回答 2 投票 0

如何使用 JavaScript 关闭一个模态框并打开另一个模态框(具有相同的 ID)?

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

回答 1 投票 0

Bootstrap:关闭模态并通过 javascript 打开另一个模态(具有相同的 id)

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

回答 1 投票 0

如何在 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; }

回答 1 投票 0

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

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

回答 3 投票 0

我正在尝试根据 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

回答 1 投票 0

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

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

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.