twitter-bootstrap-4-beta 相关问题


为什么我们不能使用CSS改变Bootstrap 4中徽章类的颜色?

Bootstrap v4.3.1 中徽章的类是 。徽章 { 显示:内联块; 填充:0.25em 0.4em; 字体大小:75%; 字体粗细:700; 行高:1; 文本对齐:居中; 白色-s...


如何在 ASP.NET MVC 4 中为 CSP 使用动态随机数

我在 ASP.NET MVC 4 中开发了 MVC 应用程序。我在几个页面中使用了 javascript。一些 javascript 被引用为 @Scripts.Render(“~/Scripts/bootstrap”) @Scripts.Render("~/Sc...


当需要删除浮动标签效果时也删除

有没有一种方法可以用于 bootstrap 4 上的浮动标签,当我删除输入上所需的标签时,标签保留在边框的顶部。 $(文档).ready(函数() { $('.form-g...


鼠标悬停时停止 setTimeout 引导模式

我使用 Bootstrap 4 创建模态,并在后端添加 settimeout 以在 X 秒后关闭模态。 但如果用户没有读完该模式,这就是我的主要目标:我想停止设置...


引导行不占据 100% 宽度

我有一个引导网格布局,但行没有占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML: 我有一个引导网格布局,但该行未占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML: <div class="container-fluid"> <h1 class="center-text" id="heading">[Enter Heaading Here]</h1> <div class="container"> <div height="100px" class="row border-show"> <div class="col-4" id="one"></div> <div class="col-4" id="two"></div> <div class="col-4" id="three"></div> </div> </div> </div> 这是CSS: .center-text{ text-align: center; } #heading{ padding: 60px; } .border-show{ border-style: solid; border-color: black; } 万一其他人遇到这个问题并且答案不能解决他们的问题,导致此问题的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下,导航栏已经有一个类似网格的系统,因此如果您尝试在其中添加列,那么您似乎将其推到了边缘。无论如何,它们都没有必要。 因此,如果这个答案不能解决您的问题,请检查您是否位于另一个已经处理间距的 Bootstrap 组件内。您可能正在尝试对您的内容进行双重定界! 将其从container中取出。 container 不是 100% 宽度,不应嵌套在另一个容器中。 container类有这样的效果。 <div class="container"> <div class="row"> <div class="col-12"> div into <b>container</b> class </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> div into <b>container-fluid</b> class </div> </div> </div> 此代码将生成以下图像: 在我的例子中,甚至容器流体也不起作用,因为我在同一 div 中使用了带有容器流体的行类。因此,我从父 div 中删除了行类,并在其中创建了一个子 div 并使用了行类。然后就成功了。 <div class="container-fluid row"> <div class="col-12"> didn't work </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> worked </div> </div> </div> 我刚刚遇到了类似的挑战,嵌入式 iframe 没有占据整行。我正在使用 bootstrap 5。以下是让 iframe 占据 100% 宽度并具有响应能力的方法: <div class="row"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe> </div> </div> ratio和ratio-16x9是Bootstrap 5中的新功能,使这一切变得超级简单。


实现Api来存储facebook/twitter或其他东西的凭证

我正在为 iPhone 或 Android 等移动设备编写内部 API。 我希望使用这些设备,用户只能通过 Facebook Connect 或 Twitter Connect 与应用程序连接。 我不知道iO...


使用 flutter 和 firebase 登录 Twitter 无法 100% 工作

我想在我的应用程序中实现 Twitter 登录...到目前为止一切顺利,我可以运行它,但现在我有点卡住了,我不知道发生了什么...我写了一个函数(见下文)让您登录...


在 iOS7 中使用新 Twitter API 1.1 获取所有公共推文的列表

我有一个应用程序,我希望在我的 iOS 应用程序中获得来自 twitter 的公共推文。 我想要如下图所示的东西。 TWRequest 已被弃用,所以我使用了以下代码,但它不是


如何使用 Bootstrap 5 禁用自定义范围而不更改样式?

我有范围: 我有范围: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%"> </div> </body> </html> 我想禁用它(它应该仍然看起来一样,但用户不能再与它交互),但是不改变样式。例如: 图中,顶部的启用,底部的禁用;我想禁用它,同时保持顶级范围的样式。 我尝试手动重新创建原始样式,但没有成功: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <style> input[type=range]:disabled { background-color: blue; color: blue; background: blue; } </style> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled> </div> </body> </html> 除此之外,我在研究中找不到任何其他可能的解决方案。 您实际上需要“如何”禁用它? 设置 pointer-events: none 并添加 tabindex="-1",你会得到一个看起来仍然相同的元素,但用户无法再与之交互(至少通过鼠标单击/点击,并且他们无法通过键盘将其聚焦)控制其中之一 - 不确定是否还有其他什么?) 由于没有设置 name 属性,该字段不会成为表单提交数据集的一部分 - 如果在您的实际用例中有所不同,您也可以删除(并重新设置)名称,当您可以打开和关闭 tabindex。


macOS 14 中的 FortiClient VPN 白色空白屏幕

FortiClient版本:7.0.9.0360 系统版本:macOS 14 Public Beta 2(包括macOS 13.4) 当我打开 FortiClient VPN-Only(包括完整版)时,会显示白色空白屏幕。 截屏 然后我...


在F#的计算表达式中定义新的关键字

F# 3.0 beta 包含一个带有大量新关键字的查询 {} 计算表达式。 如何在计算生成器中定义自己的关键字?


ng-bootstrap 滚动间谍在没有高度的情况下无法工作?

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令,如文档中所述,但它不起作用 - 滚动时活动项目不会改变。 我的代码如下: 我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令,如文档中所述,但它不起作用 - 滚动时活动项目不会改变。 我的代码如下: <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到,我的问题是我没有向我的 div 提供 height,这是事实。 但我的滚动间谍部分遍布整个页面,而不是一个小 div,(导航本身是 sticky-top)。所以我不能给它高度。 我知道有替代方法 - 刷新窗口滚动上的滚动间谍,但我没有找到可以帮助我的正确代码。 你能解决我的问题吗? 为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。 非常感谢! 附上 stackblitz 演示的链接 注意:我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy (我想它是非常相似的库) 我做什么: 我将所有内容(包括导航)包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比(1 是 100%) 包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯,问题是如何“滚动到”。 “链接”应该作为链接使用。 第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件,我们需要使用提供者,provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后,我们需要考虑到我们的页面确实没有滚动,div“包装器”是谁拥有滚动。因此,我们订阅 router.events,当事件有“锚点”时,我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子


引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。 我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了,但在我使用的 Bootstrap 版本(v3.1.1)中,该类是“progress-striped”(不是像文档所说的“progress-bar-striped”),并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS,选择器“progress-bar”已更改为“bar”: ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此,将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。 不确定这种疯狂的原因是什么,似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码,看起来你的进度条 div 缺少一些元素? 如果您使用 Bootstrap v4 并且需要动画,则需要使用 progress-bar-animated 而不是 active。


Next.js 14 JWT 会话错误与下一步身份验证 - 类型错误

我一直在使用 Next.js 14 和 Next Auth 5 beta,每当我尝试登录时,我都会得到 [验证][错误][JWTSessionError] [auth][原因]:类型错误:无法读取未定义的属性(


Solr 搜索问题

我们将大量推文和博客提要存储到 solr 中。 现在,如果用户搜索像 @rohit 这样的 twitter 提及,仅包含单词 rohit 的记录也会被返回。 ...


UIActivityItemSource Protocole 设置复杂对象

我正在使用iOS 6新的方式来共享信息:UIActivityViewController。要根据媒体(facebook、twitter 或邮件)选择共享数据,我的视图控制器实现了 UIActivityItem...


Bootstrap 5.2 下拉菜单在 Laravel 中不起作用

我已经从 Bootstrap 网站安装了预配置的导航栏之一。是Bootstrap 5.2的最新版本;但是,下拉菜单不起作用。我没有碰代码;这只是一个定义...


在 Rails 7 应用程序中使用 bootstrap javascript

我有一个正在运行的 Rails 7 应用程序,它使用 esbuild 作为 JS 捆绑器并导入了 bootstrap。 我正在尝试弄清楚如何访问主“外部”的任何 Bootstrap Javascript 功能


如何在 Rails 7 esbuild 应用程序中显示 Bootstrap 5.3 弹出窗口?

当我使用 Bootstrap 创建全新的 Rails 7 应用程序时,Modals 可以开箱即用,但 Popover 则不然。我如何让他们工作? Rails 7.1.2、esbuild、Bootstrap 5.3.2: Rails 新 -- 数据库 sqlite3 --


应用程序定制器和多个Web部件中的jquery和bootstrap

是个人选择使用bootstrap进行定制。因此,我计划在应用程序定制器和多个 Web 部件中使用 jQuery 和 Bootstrap。对此最好的方法是什么?我正在尝试...


如何确定 Bootstrap 5 Modal 按钮不起作用的原因?

我有一个基于 Django 的网站,使用 bootstrap 5。我有一个数据表和一个包含大量文本的注释列。我正在尝试使用 Bootstrap Modal 弹出功能来显示要保留的注释...


Eventsource golang:如何检测客户端断开连接?

我正在开发基于 Twitter 主题标签的聊天室,并使用服务器发送的事件,包 https://github.com/antage/eventsource 我有一个关于客户端断开连接的问题。我如...


如何在Bootstrap中管理较小尺寸的页面?

.$s['姓氏']. <div class="input-group col-sm-10"> <span class="input-group-addon col-sm-4 text-right border">.$s['Surname'].</span> <input id="msg" type="text" class="form-control col-sm-6" name="msg" placeholder="Enter Marks"> 嗨,我尝试使用 2 列,但是在手机上,控件的行为似乎有所不同 如何让控件在小屏幕上保持常规尺寸? 谢谢你。 当你在代码中说 col-sm-6 意味着从小尺寸(576px)开始采用这个尺寸 <div class="container-fluid"> <div class="row"> <div class="col-12 col-sm-8 col-md-6"></div> <div class="col-12 col-sm-4 col-md-6"></div> </div> </div> // <div class="col-12 col-sm-8 col-md-6"></div> 这段代码传达的概念是 col-12:通常占据所有小于small的列 col-sm-8:从小模式开始占据 8 列(576px) col-md-6:从中模式开始占据 6 列(768px) 我们还可以按需使用col-lg,这取决于我们的需求。 我希望我明白你的意思并且我能够很好地帮助你 你应该尝试下面的代码, <div class="container"> <div class="row"> <div class="col"> Here col is used for auto width (if row has multiple elements in column so col width will be adjusted automatically by dividing them) </div> </div> </div> 或 <div class="container"> <div class="row"> <div class="col-12"> Here col-12 is used so this will get entire width of the viewport (12 grids) as it is specified.. </div> <div class="col"> Here col is used so as above div has col-12 class so this col will get auto width and there is no more columns in this row so this will get 100% of width. </div> </div> </div> 注意:适用于移动设备等小型设备(<576px) only col is used and col itself uses all 12 grids but if we have multiple columns in row and we want to give different grids to them, then we have to specify as col-6, col-4, col-12 etc as per requirement... 有关更多详细信息,我已附加一些链接并仅供参考... 引导网格系统 谢谢... 阿拉普·乔希


PHP 与 Bootstrap 轮播

我正在尝试学习 PHP 并将其与我的网站的 Bootstrap 库一起使用。我希望使用引导程序轮播,如此处所示 我想要实现的是带有标题的轮播和


带有 --css bootstrap 的 Rails 7 新应用程序 - Turbo 按钮不起作用

使用 Rails new myapp --css bootstrap 创建新应用程序 Rails 7 时,我的涡轮按钮将不起作用: =button_to“退出”,edit_post_path,方法::删除,形式:{数据:{turbo_confirm:“...


Bootstrap 模式仅显示 MongoDB 集合中的第一条记录

我正在使用 NodeJS、Handlebars 和 Bootstrap 构建一个简单的 Web 应用程序。它应该循环遍历模拟产品的 MongoDB 集合并显示其字段。 我正在“产品...


Bootstrap 5使用js切换折叠不起作用

出于某种原因,我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案,它似乎在 Bootstrap 5 中不起作用。 错误:未捕获类型错误:c.nextElementSibling.collapse i...


Bootstrap 无法与 Rails 正确配合使用

大家好 我使用这个入门模板启动一个新的 Rails 应用程序,当我从 bootstrap 添加一个简单的导航栏时。 它看起来像这样 主要问题是JS不起作用,下拉菜单我...


如何在没有ID的情况下初始化和操作Bootstrap Collapse?

出于某种原因,我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案,它似乎在 Bootstrap 5 中不起作用。 错误:未捕获类型错误:c.nextElementSibling.collapse i...


Bootstrap CSS - 将页面从中心向下拆分。用图像填充左侧,用文本填充右侧

我对 bootstrap 5 相当熟悉,但我正在开发一个项目,我试图找出将页面从中心拆分的最佳方法,但中间还有一个容器,允许.. .


如何用html和bootstrap保证屏幕宽度内自动换行

我正在 Flask、Mongodb、HTML 和 Bootstrap 上制作一个 Web 应用程序。我的问题是表格列中的单词会从屏幕上消失,我需要滚动浏览器窗口才能阅读它们。 可以请你...


用 Bootsrap 制作的网站右侧的空间不会消失吗?

无论我做什么,我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 无论我做什么,我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <!-- NAV --> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div> <!-- NAV END --> <!-- ABOUT US --> <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2> <!-- ABOUT US --> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div> <!-- ABOUT US END --> <!-- PRODUCT --> <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div> <!-- PRODUCT END --> <!-- PROJECT --> <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div> <!-- PROJECT END --> <!-- FOOTER --> <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div> <!-- FOOTER END --> </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏,但容器结构溢出了 请将这段代码添加到您的 CSS 文件中。然后,它就会起作用。 .row{ margin-right: 0px; }


如何让 Reactstrap 响应式?

我刚开始使用reactstrap(不是react-bootstrap),并且正在尝试如何渲染“移动”和“桌面”视图。 我如何让reactstrap渲染页面...


Grails 4 升级

我正在从 grails 3 升级到 grails 4 但运行时出现以下错误 错误 org.springframework.boot.diagnostics.LoggingFailureAnalysisReporter - **************************


有没有办法在 Facebook 上分享 React 页面并传递图像?

我正在尝试让我的 React 页面可在 Facebook 和 Twitter 上共享。 我尽了一切努力,我整天都在谷歌上搜索,但找不到答案。 我正在尝试让我的 React 页面可以在 Facebook 和 Twitter 上共享。 我尽了一切努力,我整天都在谷歌上搜索,但找不到答案。 <FacebookShareButton url={window.location.href} title={exactNews.text ?exactNews.title : ""}> <FaFacebookF/> </FacebookShareButton> 有什么建议吗? 无法再将图像传递到共享选项,将图像添加到共享 URL 的唯一方法是使用源中的 og:image 标签。请注意,Facebook 忽略 JavaScript,因此 og:image 标签必须位于原始源中,而不是通过 JavaScript 动态添加。然后,Facebook 会自动使用 og:image 标签中指定的图像。 更多信息:https://ogp.me/ 您可以使用 https://prerender.io/benefits/social-media-sharing/ 或 Next.js 等框架使用正确的 OG 图像在服务器端渲染页面。


对数组进行排序。输入--> [3,4,5,1,2]预期输出--->[5,2,3,1,4]

输入:nums = [3, 4, 5, 1, 2] 输出:nums = [5, 2, 3, 1, 4] 解释:在此示例中,偶数 [4, 2] 位于位置 [1, 4]。 它们按升序排序并放置在...


Numpy 沿轴最大值

我在这里错过了什么吗?我希望以下代码片段中的 np.max 将返回 [0, 4]... >>> 一个 数组([[1, 2], [0, 4]]) >>> np.max(a, 轴=0) 数组([1, 4]) ...


引导日期时间选择器无法运行

我正在尝试优秀的 Bootstrap DateTimePicker 插件,但似乎一开始就遇到了缓冲区。页面控件显示正确,但日历按钮完全


init方法调用失败; Spring 4 Hibernate 4 项目中的嵌套异常是 java.lang.NullPointerException

我正在尝试使用纯Java配置来设置一个没有XML配置的spring 4 + hibernate 4 Web应用程序。 同时我在启动时遇到以下错误。 13:32:47,649 错误 [org.jb...


在添加新行时刷新 html 可编辑表格 - Bootstable

我使用 boostable 插件在运行时内联编辑 HTML 行。该插件位于 https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html。问题是现在当我想要的时候


如何在 Laravel 中添加外部 scss 文件?

我从Colorlib购买了一个主题,Bootstrap Sidebar V02,包含SCSS文件。将这个外部 SCSS 文件添加到 Laravel 项目的相关方法是什么? mix.sass('资源/sass/样式。


如何配置验证以对无效输入使用“is-invalid”类

默认情况下,ASP.NET Core 中的输入验证使用类 input-validation-error,但 Bootstrap 5 使用 is-invalid。 我找到了一些解决方案: 创建样式 使用 jQuery.validate.unobtrusi...


Laravel 线元素包 - 如何将其与 bootstrap 主题一起使用?

有这个包https://github.com/wire-elements/modal。 我已按照配置步骤来实现模式,但是我使用了不同的 CSS 框架。我的问题是哪里说:


Blazor 内联渲染怪异

我正在使用 Blazor Bootstrap 并尝试在提交表单后更新页面。该表单只是创建一个数据库条目并返回 true 或 false。该页面正在使用禁用的选项卡...


BS 导航栏不适用于下载的 Bootstrap 库。 CDN 没问题,请帮助我

我正在尝试使用带有下载的库/离线的引导程序。 然而,编写的 html 与 CDN 配合得很好。 这是文件夹架构。 ...


使用递归创建单行号模式

编写一个打印出数字序列的递归方法。 printSequence(4) 打印 1 2 3 4 3 2 1 公开课练习{ 公共静态无效主(字符串[] args){ 打印序列(4); ...


Bootstrap 手风琴边框顶部不是第一项

我在 Angular 应用程序中使用引导手风琴,我希望周围的每个人都有一个带颜色的边框。通过标准引导程序,如果手风琴不是...


Angular 中的 JavaScript 函数“未定义”错误

我正在尝试让 Angular 17 项目正常运行。我正在使用 Bootstrap (5),并尝试让 datePicker 工作。这需要一些 JavaScript 代码,但我无法使用这些代码。我已经关注了...


引导模式在单击按钮时不显示内容(Django 框架)

我在 HTML 代码中遇到了 Bootstrap 模式的问题,当我单击触发它们的按钮时,它们没有显示任何内容。尽管 ID 和属性看似正确,但


cakephp 4 从 3.9 迁移到 4 后出现路径错误

我按照步骤将 CakePHP 3.9 迁移到 4,前端工作正常,但管理不正常,这意味着我有一个 /site 路径和一个 /site/admin,在检查日志后我意识到


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