twitter-bootstrap 相关问题

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

插入可视化编辑器切换标签时,svg 链接不起作用

这是该页面的链接。 这是用于实现的代码 身份管理   这是该页面的链接。 这是用于实现的代码 <div class="col-md-6"> <p class="main-block-title">IDENTITY MANAGEMENT</p> &nbsp; <img class="padding-0-20" src="https://salesmate.technobraingroup.com/wp-content/themes/salesmateV1/images/idm_svg_circle edited.svg" /> </div> 问题是,当您对 SVG 文件使用 img 标签时,链接不起作用。 解决办法是: 按原样嵌入 SVG 代码 https://codepen.io/moshfeu/pen/Ryyrqy 使用 object 标签代替 img: object { width: 200px; } <object data="//salesmate.technobraingroup.com/wp-content/themes/salesmateV1/images/idm_svg_circle edited.svg" /> 就像问题中所描述的那样使 html svg 对象也是可点击的链接

回答 1 投票 0

Blazor 项目中的顶行 px-4 css 类

我正在尝试修改任何 Blazor 项目附带的标准布局,例如WASM 或服务器,但我对顶行 px-4 css 类有点困惑。 这是似乎定义了 t 的 HTML...

回答 1 投票 0

Bootstrap 仅滚动一个 div 并将其他内容保留在顶部

有点像Facebook。我有 4 列,我希望滚动只适用于其中一列的内容。 我读过,我应该将 body 的高度设置为 100%,然后修复 t 的高度...

回答 2 投票 0

动态拉动主体的引导模态重定向问题

我在我们的管理网站上使用 Bootstrap Modals 来实现多种功能。 这些页面受我们的管理员登录保护,因此如果有人获得 URL,他们就无法执行代码等。非常标准。 我...

回答 1 投票 0

下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...

回答 1 投票 0

无法将数组传递给 Bootstrap 工具提示的 HTML 数据属性

我正在使用 Bootstrap 5.2 版本。我正在尝试使用工具提示插件的fallbackPlacements选项。问题是fallbackPlacement需要一个数组,但似乎不接受一个...

回答 1 投票 0

Bootstrap 4 垂直对齐文本不会在卡片上居中

尝试垂直对齐以下卡片中的文本中心: 尝试垂直对齐以下卡片中的文本中心: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="row text-center h-100"> <div class="col-md-3 text-center my-auto"> <div class="card card-block justify-content-center" style="height: 120px"> <div class="card-body"> This is some text within a card body. </div> </div> </div> </div> 我完全意识到这里有许多类似的问题,但是我尝试了各种解决方案,但似乎没有一个适用于我的卡。 我在父卡、卡体和卡体上尝试了“my-auto”。我尝试了“d-flexalign-items-center h-100”和“justify-content-center”。还尝试使用显示属性。我缺少什么? 这里是使用 Bootstrap 4 文档的解决方案 flexbox。阅读更多这里 你需要知道什么, d-flex -> 使元素成为弹性框。 align-items-center - 垂直对齐内容。 justify-content-center - 水平对齐内容。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="row text-center h-100"> <div class="col-md-3 text-center my-auto"> <div class="card card-block d-flex" style="height: 120px"> <div class="card-body align-items-center d-flex justify-content-center"> This is some text within a card body. </div> </div> </div> </div> 我错过了什么? 行高: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="row text-center h-100"> <div class="col-md-3 text-center my-auto"> <div class="card card-block justify-content-center" style="height: 120px; line-height:120px;"> <div class="card-body"> This is some text within a card body. </div> </div> </div> </div> 通过这种方式,您可以将卡片标题对齐到中心。 .card-title-center{ float: none !important; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="card col-12 text-center"> <div class="card-header bg-secondary"> <h3 class="card-title card-title-center">Card Title</h3> </div> </div> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="row text-center h-100"> <div class="col-md-3 text-center my-auto"> <div class="card card-block d-flex" style="height: 120px"> <div class="card-body align-items-center d-flex justify-content-center"> This is some text within a card body. </div> </div> </div> </div> 作者:万能钥匙

回答 4 投票 0

Ace 编辑器等宽字体存在光标间距问题

我在 ace 编辑器中发现了一些光标间距不正确的问题。问题与字体间距有关,显然解决方案是仅使用等宽字体。 这是一个...

回答 2 投票 0

如何使用boostrap在移动设备中隐藏div?

我想在所有移动设备中隐藏下面的div 我已经尝试过以下建议,但没有任何效果: 缺少可见的-** ...

回答 3 投票 0

如何在点击时更改定价表中的价格

我想创建像这样工作的价格更改按钮, 链接:https://www.teamgate.com/pricing/ 如果有任何java脚本或任何东西请给我解决方案 预先感谢。

回答 3 投票 0

Bootstrap 5 工具提示在 Angular 11 项目中不起作用

我尝试在 Angular 11 项目中使用 Bootstrap 5.0.2,代码如下: 索引.html <...

回答 7 投票 0

Bootstrap Accordion:如何在折叠或展开元素时避免页面滚动

当尝试折叠或展开手风琴的元素时,我出现意外的页面滚动。也许我只是对 Bootstrap 网格系统做错了什么?下面是一个页面示例: 我怎样才能...

回答 7 投票 0

引导轮播指示器“文本对齐:中心”不起作用

我试图让我的轮播指示器对齐到屏幕中心,但 text-align:center 没有对指示器位置做任何事情。其他一切都运行良好。任何想法...

回答 3 投票 0

自定义Bootstrap 5表格行背景颜色的正确方法?

这可行,但是可以吗? https://jsfiddle.net/h8dpyqbj/1/ .custom-bg { --bs-table-accent-bg: var(--bs-danger-bg-subtle); } ... 这可行,但是可以吗? https://jsfiddle.net/h8dpyqbj/1/ .custom-bg { --bs-table-accent-bg: var(--bs-danger-bg-subtle); } <table class="table table-sm"> <thead> <tr> <th> A </th> <th> B </th> </tr> </thead> <tbody> <tr class="custom-bg"> <td>Hi 1</td> <td>Hi 1</td> </tr> <tr> <td>Hi 2</td> <td>Hi 2</td> </tr> </tbody> </table> 使用 Bootstrap 4,我可以做到 .class { background-color: red; },但这在 BS 5 中被破坏了,现在我不确定正确的方法。 注意:如果不明显,我只想通过使用 JS 以编程方式向行添加类来自定义特定行。 使用 CSS 变量自定义 Bootstrap 5 表格行的背景颜色是实现所需样式的有效而简洁的方法。您使用 --bs-table-accent-bg 变量的方法是正确的,并且利用了 Bootstrap 的内置自定义功能。 但是你也可以通过 css 中的 html 元素选择器来实现这一点。

回答 1 投票 0

Laravel Blade 模板中可折叠行的 JavaScript 过滤器问题

我对 Web 开发相对较新,我的 js 代码遇到了问题。我在我的网站中使用 js 实现了过滤功能,但它似乎干扰了崩溃功能...

回答 1 投票 0

使用 jQuery 在引导网格中添加/删除元素并防止删除第一个元素

使用 jQuery 在引导网格中动态添加/删除元素效果很好,但是我们如何防止删除第一个元素呢?另外,我想添加一些添加元素的限制。可以...

回答 1 投票 0

如何防止点击链接时打开 Bootstrap 模式

我有一个表,单击行上的任意位置将打开一个模式对话框(以编辑行),但有些列包含链接。当这些链接被点击时,我不想去li...

回答 1 投票 0

模式窗口Bootstrap滚动到底部

我有一个具有动态高度(大于屏幕高度)的模式窗口 Bootstrap。如何以编程方式将窗口滚动到底部?我尝试这样做: $('#modal').animate({scrollTop: $('#m...

回答 6 投票 0

Select2 Bootstrap Modal 带模态滚动

更新: 我添加了这个: $("#id_project").select2({dropdownParent: $(".modal-body")}); ...这会导致下拉列表正确放置,并且可以输入搜索内容。

回答 6 投票 0

另一个下拉菜单中的下拉菜单

我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单,但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗? 我有一个问题。我想在“游戏”下拉菜单中创建“我们的选择”下拉菜单,但我不知道为什么代码不起作用。你们能告诉我问题出在哪里吗? <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu" > <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a></li> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> </ul> </div> </ul> </li> </ul> </div> 您可以简单地添加另一个嵌套的 li,其中包含另一个 dropdown,并使用自定义 CSS 在悬停时显示该 dropdown。 现场工作演示: .sub-menu:hover .games-menu { display: block; } .sub-menu2:hover .our-pick-menu { display: block; } <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="navbar-collapse" id="menu"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Games</a> <ul class="dropdown-menu games-menu"> <li><a href="latest.html" class="dropdown-item">Latest</a></li> <li><a href="best_selling.html" class="dropdown-item">Best Selling</a></li> <div class="dropdown"> <li class="sub-menu"><a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">Our Pick</a> <ul class="dropdown-menu games-menu"> <li><a href="2019.html" class="dropdown-item">2019</a></li> <li><a href="2020.html" class="dropdown-item">2020</a></li> <div class="dropdown"> <li class="sub-menu2"><a href="#" class="dropdown-item dropdown-toggle our-pick-2" data-toggle="dropdown">Our Pick 2</a> <ul class="dropdown-menu our-pick-menu"> <li><a href="2019.html" class="dropdown-item">2021</a></li> <li><a href="2020.html" class="dropdown-item">2022</a></li> </ul> </li> </div> </ul> </li> </div> </ul> </li> </ul> </div>

回答 1 投票 0

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