Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
我正在使用 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 会在盒子模型之外添加空间，因此您应该使用填充来防止换行。欲了解更多信息，请参阅此处
如何在 Bootstrap 4 中将卡片设置到 col-md 的中间[重复]
我想把这张卡放在中间而不是中心，该怎么做？ 我已经尝试使用 my-auto 但根本不起作用。 请检查我的代码并进行一些更改。谢谢！ 我的脚本： &l...
我初始化对象如下 $('[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 我希望这有帮助。
如何在引导的 React/Redux 应用程序中覆盖 Bootstrap 主题颜色？
可能是新手问题（从 REACT 开始），但我无法在新引导的 React 应用程序中更改主题颜色。 我读了一些答案，但不幸的是，它们不起作用......
仅在较小的屏幕上将 wordpress bootstrap4 navwalker 标题菜单分成两行
此 WordPress 网站使用 Bootstrap 4 和 Navwalker 版本。 我的客户只通过 iPhone 查看她的网站，她不希望菜单折叠。所以，为了让她看到整个菜单……
我只是在学习，所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...
Jquery / Daterangepicker 问题，仅允许通过“应用按钮”更改日期
我使用Jquery daterangepicker， 如果用户没有单击“应用”按钮，我想取消设置日期的选项。 现在，当用户单击 daterangepicker 框外时，日期...
我正在使用 ASP.NET Core 6、jQuery 和 Bootstrap。我有一个带有左侧菜单的屏幕，我希望菜单和顶部菜单保持静态，只有输入详细信息可以垂直滚动。 看这个
我花了一周的时间来解决媒体查询的问题，但我仍然无法解决这个问题。当图像移动到1028像素时仍然无法旋转。 我有一张图片...
如何在c# net-core selectlist中显示两列值（姓氏+姓名）？
解释 我想将同一行中的客户姓名（第 2 列）和姓氏（第 3 列）显示到选择列表中。 客户的 SQL 表 { ID， 姓名， 姓， 年龄 } 问题 如何才能做到这一点？
Javascript 根据名称输入创建 slug，并将其显示在禁用的 slug 输入上
所以我一直在尝试使用 Javascript 创建一个 slug，并允许我的用户在按下提交之前查看该 slug 是什么。这是我的 JavaScript 代码： 函数 slugify(文本) { 返回...
格式遵循这给了我 mm/dd/yyyy 我想更改为 yyyy/mm/dd 格式 开发结束日期... 格式遵循这给了我 mm/dd/yyyy 我想更改为 yyyy/mm/dd 格式 <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4"> <label>dev End Date</label> <input class="form-control" type="date" id="dev_end_date"> </div> 您可以从一个简单（且有效）的解决方案开始，例如聚合物的 date-util，它允许您使用像这样的标签： <date-util format="dd/MM/yyyy"></date-util> 并将其调整为输入字段...或者您可以发挥创意并弹出完整的日期选择器 您可以添加“data-date-format”，例如 <input type='text' class="form-control" data-date-format="YYYY/MM/DD"/> 检查这个链接
Bootstrap 4.6.0 更新到 4.6.2 导致字体变大，并删除了选项卡的颜色。我能做什么？
主题应该说明一切，但我尝试将一些代码库中的 Bootstrap 从版本 4.6.0 更新到 4.6.2。就整体布局而言，它通常有效，但我注意到一些显示
我使用html5标签在后台添加了一个视频： 我使用html5标签在后台添加了一个视频： <video autoplay="autoplay" loop="loop" id="bgvid" poster="/assets/food/home/banner.jpg" muted> <source src="http://38.89.136.40/videos/eatwedovideo.mp4" type="video/mp4" /> </video> 它工作正常，但有时当我们单击背景时，它会像正常视频播放一样开始在屏幕上播放，然后我们需要单击“完成”，它就会从屏幕上消失。 我只想在后台拍摄该视频，而不是在屏幕上播放。 请建议一种处理此类问题的方法。 谢谢 这里有同样的问题，但我解决了这个问题，在视频标签上添加 playsInline 和 webkit-playsinline，并记住，不要添加 controls 标签。该解决方案在容器内播放视频，例如： <video autoPlay loop muted playsInline webkit-playsinline> <source src="path/to/your/video" type="video/mp4" /> </video> 问候:) 使用此链接： 您应该使用 css 来修复背景中的视频，请参阅此处： https://slicejack.com/fullscreen-html5-video-background-css/ 演示： http://dev2.slicejack.com/fullscreen-video-demo/index.html
现在我正在尝试在浏览器中创建一个代码编辑器。 对于语法突出显示，我选择使用代码镜像。代码镜像的问题在于，当我们使用代码镜像时“对象”...
Bootstrap 4.4.1：如果 HTML 遵循特定部分，则不会呈现 HTML
标记中的我的按钮部分（如注释中所示插入按钮）不会出现在包含 select 的 div 之后，但如果放置在其之前则会出现。 我尝试将按钮部分移动...
侧边栏需要在单击后更改活动类。这是我的引导代码，我用这个 JavaScript 代码尝试过，但它不起作用。 $(函数(){ $('.sidebar1 a').filter(函数...
如何让 React-Bootstrap 汉堡风格的菜单在点击其中的链接时折叠？
我在我的项目中使用react-bootstrap库，并且我正在设计一个网站，其中所有内容都在一个页面上，因此我的所有链接都是对同一页面的滚动位置的引用...
Framer-motion 覆盖 React-Bootstrap
我正在构建一个使用 gatsby/react/react-bootstrap/framer-motion 的网站。我遇到了framer-motion 覆盖我的react-bootstrap css 的问题？我不想重新设计所有的响应能力......
使用 laravel，我有一个从数据库获取的用户详细信息列表，每条记录末尾都有编辑和删除按钮。当我单击删除按钮时，特定记录将被删除，但是...