bootstrap-4 相关问题

如何让我的下拉选项出现在上面，而不是在其他元素后面？如何让我的下拉选项出现在上方，而不是其他元素后面？ <div class="col-lg-4 col-md-6 col-12" > <div class="single-schedule " style="height: 410px;"> <div class="inner"> <div class="single-content"> <select class="small-dropdown"> <option value="volvo">Neurology</option> <option value="saab">Ent</option> <option value="fiat">Phsycology</option> <option value="audi">Brain</option> </select> </div> </div> </div> </div> 这可以通过增加 css 类中的 Z-index 来解决 .small-dropdown { position: relative; z-index: 10; } 请注意，某些元素的 z 索引可能比菜单更高，因此您只需增加 z 索引即可请参阅文档

html css bootstrap-4

回答 1 投票 0

如何在同一行显示多个引导卡

我正在尝试使用 bootstrap 4 在卡片中显示从数据库中检索到的数据，数据已正确检索，但问题在于这些卡片的显示，因为它刚刚显示在...

django bootstrap-4

回答 2 投票 0

Gatsby - 引导错误：util.js:68 未捕获的类型错误：无法读取未定义的属性“fn”

我目前正在使用 Gatsby 框架在 React 中构建一个网站。下面的问题是这样的： util.js:68 未捕获类型错误：无法读取未定义的属性“fn” 在 util.js:68 在 util.js 处：...

jquery reactjs bootstrap-4 gatsby react-helmet

回答 2 投票 0

响应式设计 - 在小屏幕上每行显示 2 张卡片

我正在开发一个网页，其中有一排卡片，每张卡片都包含一个图像和一个标题。目前，我正在使用 Bootstrap 网格系统在较大的屏幕上每行显示 4 张卡片 (col-md-2)，...

html css twitter-bootstrap bootstrap-4 bootstrap-5

回答 1 投票 0

引导程序中项目之间的空间

我正在使用 bootstrap 4，我有一个显示的项目列表，如下所示：我正在使用 bootstrap 4 并且我有一个像这样显示的项目列表： <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ... </div> </div> </div> 在我使用 Google Chrome 的桌面视图中，我可以按行看到 3 个项目，但问题是列之间没有空格。所以我添加了一个类item-wr .item-wr { margin: 10px; } 但这里也有换行符，我只看到 2 个项目，行右侧有一些空格。那么我怎样才能让每行 3 件物品col-md-4保持空间？ P.S 我希望每行的开头或结尾没有空格。每行的第一列不得有一些 margin-left 并且每行的最后一列不得有一些 margin-right 你必须在card内上课col-md-4 col-sm-4 col-12。因为col-md-4 col-sm-4 col-12这个类本身会填充并提供空间，所以你可以在列类中应用设计相关的类。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> <div class="col-md-4 col-sm-4 col-12"> <div class="card item-wr"> ... </div> </div> </div> </div> 使用 Bootstrap 4 提供的填充实用程序类（如 pr-2）向右填充 2 个间距单位。参考这里附注margin 会在盒子模型之外添加空间，因此您应该使用填充来防止换行。欲了解更多信息，请参阅此处

html css twitter-bootstrap angular bootstrap-4

回答 2 投票 0

如何在 Bootstrap 4 中将卡片设置到 col-md 的中间[重复]

我想把这张卡放在中间而不是中心，该怎么做？我已经尝试使用 my-auto 但根本不起作用。请检查我的代码并进行一些更改。谢谢！我的脚本： &l...

html css twitter-bootstrap bootstrap-4

回答 1 投票 0

如何在Bootstrap Tooltip中添加标签表

我初始化对象如下 $('[data-toggle="tooltip"]').tooltip({ 容器：“身体”， html：正确，标题：函数（）{ 返回'text1 我按如下方式初始化对象 $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, title: function () { return '<u>text1</u><table class="table"><tr><td>text2</td></tr></table>'; } }); 但我只看到text1。是否可以在工具提示中插入表格？我在 Github 上发现了一个问题，指出 Bootstrap 的消毒剂导致了这个问题。您需要做的是允许用于您的表的所有元素都在白名单中（也tbody，这不是由您的代码定义的，但似乎您需要它）。另请看一下这个question，它是为弹出窗口完成的。之后，您可以再次在 tooltip 选项中使用此自定义白名单。我创建了一个运行的小提琴： var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList; myDefaultWhiteList.table = ['class']; myDefaultWhiteList.tbody = []; myDefaultWhiteList.tr = []; myDefaultWhiteList.td = []; $('[data-toggle="tooltip"]').tooltip({ container: 'body', html: true, whiteList: myDefaultWhiteList, title: function () { return '<u>text1</u><table class="table text-light"><tr><td>text2</td></tr></table>'; } }); <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <button class="ml-5 mt-5 btn btn-primary" data-toggle="tooltip"> Test </button> 您可能会注意到，这是 Bootstrap 不建议的行为。我建议使用 Bootstrap 的弹出框来处理较大的内容，例如表格。祝你好运！我相信工具提示的内容已添加到您要应用工具提示的元素的标题属性中。要分解它，本质上你想做的是...... <div data-toggle="tooltip" title="<u>text1</u><table class="table"><tr><td>text2</td></tr></table>"> Foo </div> $('[data-toggle="tooltip"]').tooltip(); 如果您想在表格中包含信息作为工具提示，我认为您必须创建一个包含表格的元素，将其正确放置在您想要悬停的元素附近，并使用 $.hover 来显示和隐藏元素。类似的东西 $('#hoverTest').hover(function(){ $('#customTooltip').removeClass('hideme'); }, function(){ $('#customTooltip').addClass('hideme'); }); table, th, td { border: 1px solid black; } .hideme{ display:none } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="hoverTest">Hover here</div> <div id="customTooltip" class="hideme"> <table> <th>Col1</th> <th>Col2</th> <tr> <td>Cell1</td> <td>Cell2</td> </tr> </table> </div> jquery 最简单的技巧。 http://jsfiddle.net/b80tn4hx/3/ $('a').hover(function(ev){ $('.tablediv').stop(true,true).fadeIn(); },function(ev){ $('.tablediv').stop(true,true).fadeOut(); }).mousemove(function(ev){ $('.tablediv').css({left:ev.layerX+10,top:ev.layerY+10}); }); .container{ padding: 15px; } .tablediv{ display:none; position:absolute; background: #999; padding: 5px; border: 1px solid red; } td{ border:1px solid #777; padding: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <a href="#">test</a> <div class="tablediv"> <table> <tr><td>asdf</td><td>gsdi</td></tr> <tr><td>asdf</td><td>gsdi</td></tr> </table> </div> </div> 看起来 whiteList 现在是一个 allowList 并且不再那么“隐藏”。工具提示标题中有使用 table、tbody、td 等所需的 javascript 代码示例。 https://getbootstrap.com/docs/5.2/getting-started/javascript/#sanitizer 我希望这有帮助。

bootstrap-4 tooltip

回答 4 投票 0

如何在引导的 React/Redux 应用程序中覆盖 Bootstrap 主题颜色？

可能是新手问题（从 REACT 开始），但我无法在新引导的 React 应用程序中更改主题颜色。我读了一些答案，但不幸的是，它们不起作用......

css reactjs sass bootstrap-4

回答 3 投票 0

仅在较小的屏幕上将 wordpress bootstrap4 navwalker 标题菜单分成两行

此 WordPress 网站使用 Bootstrap 4 和 Navwalker 版本。我的客户只通过 iPhone 查看她的网站，她不希望菜单折叠。所以，为了让她看到整个菜单……

php wordpress bootstrap-4 menu wp-nav-walker

回答 1 投票 0

固定位置时，样式卡会超出我的顶部导航栏的顶部

我只是在学习，所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...