twitter-bootstrap 相关问题

如何覆盖引导表行背景颜色

我有一个动态生成的表，某些行应该具有自定义背景颜色。 ... <... 我有一个动态生成的表格，某些行应该具有自定义背景颜色。 <table class="table table-striped"> <tbody> <tr class="bg-coral">...</tr> <tr class="bg-coral">...</tr> <tr>...</tr> </tbody> </table> 我也想使用 table-striped 类，以防万一没有彩色行，备用默认颜色会让它看起来不错。 但是，正如您所看到的，虽然第一行有自定义类，但它没有着色。我认为引导程序table-striped奇数行类就是原因。 尝试写这个，但没有运气： .bg-coral{ background-color: coral; } .table-striped tbody tr.bg-coral, .table-striped tbody tr.bg-coral:nth-of-type(odd) { background-color: coral; } 您可以在这里检查问题： https://jsfiddle.net/6kv3b47q/ 我可以编写什么 css 类，以确保所有具有 <tr> 类的 bg-coral 都具有背景颜色。 我想这就是你正在寻找的 .table-striped tbody tr:nth-of-type(odd) { background-color: coral!important; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-striped"> <tbody> <tr> <td>hello</td> </tr> <tr> <td>hiii</td> </tr> <tr> <td>hello</td> </tr> <tr> <td>hiii</td> </tr> </tbody> </table> 您可以根据自己的选择粘贴并更改颜色。应该可以完美解决 .table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-bg-type: #f6f5fa !important; }

合理的按钮组在 Bootstrap 3 模式中无法正确呈现

我正在编写以下代码。为什么我无法在 Bootstrap 3 模式中呈现“合理按钮组”？ <p>我正在编写以下代码。为什么我无法在 Bootstrap 3 模式中呈现“合理的按钮组”？</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34;&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;div class=&#34;container&#34; style=&#34;padding:30px;&#34;&gt; &lt;!-- Button trigger modal --&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-primary btn-lg&#34; data-toggle=&#34;modal&#34; data-target=&#34;#myModal&#34;&gt; Launch demo modal &lt;/button&gt; &lt;!-- Modal --&gt; &lt;div class=&#34;modal fade&#34; id=&#34;myModal&#34; tabindex=&#34;-1&#34; role=&#34;dialog&#34; aria-labelledby=&#34;myModalLabel&#34;&gt; &lt;div class=&#34;modal-dialog&#34; role=&#34;document&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;close&#34; data-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;span aria-hidden=&#34;true&#34;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; &lt;h4 class=&#34;modal-title&#34; id=&#34;myModalLabel&#34;&gt;Modal title&lt;/h4&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34; &gt; &lt;br /&gt; &lt;br /&gt; &lt;div class=&#34;btn-group btn-group-justified&#34; role=&#34;group&#34; aria-label=&#34;...&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34;&gt;Existing Customer&lt;/button&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34;&gt;New Customer&lt;/button&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34; data-dismiss=&#34;modal&#34;&gt;Close&lt;/button&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-primary&#34;&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </question> <answer tick="true" vote="1"> <p>文档包含您必须使用的特定注释 </p> <pre><code>&lt;a&gt; </code></pre> <p>而不是 </p> <pre><code>&lt;button&gt; </code></pre> <p><a href="http://getbootstrap.com/components/#btn-groups-justified" rel="nofollow">http://getbootstrap.com/components/#btn-groups-justified</a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34;&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;div class=&#34;container&#34; style=&#34;padding:30px;&#34;&gt; &lt;!-- Button trigger modal --&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-primary btn-lg&#34; data-toggle=&#34;modal&#34; data-target=&#34;#myModal&#34;&gt; Launch demo modal &lt;/button&gt; &lt;!-- Modal --&gt; &lt;div class=&#34;modal fade&#34; id=&#34;myModal&#34; tabindex=&#34;-1&#34; role=&#34;dialog&#34; aria-labelledby=&#34;myModalLabel&#34;&gt; &lt;div class=&#34;modal-dialog&#34; role=&#34;document&#34;&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;close&#34; data-dismiss=&#34;modal&#34; aria-label=&#34;Close&#34;&gt;&lt;span aria-hidden=&#34;true&#34;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; &lt;h4 class=&#34;modal-title&#34; id=&#34;myModalLabel&#34;&gt;Modal title&lt;/h4&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34; &gt; &lt;br /&gt; &lt;br /&gt; &lt;div class=&#34;btn-group btn-group-justified&#34; role=&#34;group&#34; aria-label=&#34;...&#34;&gt; &lt;a type=&#34;button&#34; class=&#34;btn btn-default&#34;&gt;Existing Customer&lt;/a&gt; &lt;a type=&#34;button&#34; class=&#34;btn btn-default&#34;&gt;New Customer&lt;/a&gt; &lt;/div&gt; &lt;br /&gt; &lt;br /&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34; data-dismiss=&#34;modal&#34;&gt;Close&lt;/button&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-primary&#34;&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

bootstrap v4.5 中的 justify-content-center 类不起作用，即使我的 html 与 bootstrap 文档中的 html 完全匹配

我正在尝试为我正在为本地企业设计和编码的网站创建一个响应式联系我们部分，但是 bootstrap v4.5 中的 justify-content-center 类并未将图标居中...

当引导网格折叠时如何在元素之间放置一些空间？

例如，看下面的代码，当我将浏览器调整到很小的宽度时，网格会折叠，因此两个按钮组和文本垂直对齐，并且它们之间没有空格，我该如何广告...

如何使 Bootstrap 4 列高度相同？ [重复]

免责声明。这个问题之前被问过很多次了。但随着时间的流逝，现在我们即将发布完全支持 Flexbox 的 Bootstrap 4，是时候为同一任务寻找新的答案了……

如何仅针对某些（大）断点启用 Bootstrap 弹出窗口？

我有一个完全可以工作的弹出窗口： 标记： 我有一个完全可用的弹出窗口： 标记： <a data-bs-toggle="popover" data-bs-trigger="focus hover" data-bs-placement="bottom" data-bs-html="true" data-bs-content="My popover content" href="#"> Click me </a> 调用： <script> const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) const popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new BootstrapPopover(popoverTriggerEl); }) </script> 当我将鼠标悬停在“点击链接”上时，弹出窗口就会按照我想要的方式出现，但当我在 iPad 等可触摸设备上点击手指时，它也会出现。 我怎样才能： 完全禁用小于大断点的弹出窗口 完全禁用“可触摸”设备的弹出窗口 任何提示将不胜感激，因为我在文档中找不到任何相关的。 您需要两种方法来返回当前引导断点名称，以及根据设备是否可触摸返回 bool 的方法： exports.getBootstrapBreakpoint = function () { if (window.matchMedia('(min-width: 1200px)').matches) { return 'xl'; } else if (window.matchMedia('(min-width: 992px)').matches) { return 'lg'; } else if (window.matchMedia('(min-width: 768px)').matches) { return 'md'; } else if (window.matchMedia('(min-width: 576px)').matches) { return 'sm'; } else { return 'xs'; } } 以上宽度是 Bootstrap 5.3.3 的默认宽度。 exports.isTouchable = function () { return ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0); } 接下来定义一个方法，该方法将触发自定义事件：加载、窗口大小调整和设备方向更改，但由于这些事件可能会淹没大量事件，因此我们需要对它们进行反跳： let resizeTimeout; $(window).on('load resize orientationchange', function () { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function () { $(window).trigger('resized'); }, 250); }); 此时 resized 是我们每 250 毫秒触发一次的自定义事件的名称。 最后，我们可以通过以下逻辑来控制所需弹出窗口的存在，该逻辑结合了我们迄今为止编写的所有内容： $(window).on('resized', function () { const isTouchable = helpers.isTouchable(); const breakpoint = helpers.getBootstrapBreakpoint(); const eligible = [ 'lg', 'xl', ]; if (isTouchable) { $('#cart-popover').popover('dispose'); } else { if (!eligible.includes(breakpoint)) { $('#cart-popover').popover('dispose'); } else { $('#cart-popover').popover(); } } });

重置 row_class 或分配不同的值，而不是添加新值

我在 Laminas 项目中使用 twbs-helper-plugin 来渲染表单元素。 我不知道如何定义表单元素之间没有间距。默认情况下，class="mb-3" 是...

编译较旧的 Bootstrap LESS 文件时遇到问题

过去几年我用 Bootstrap 构建了许多网站。我现在使用 lessphp 进行服务器端编译，但旧站点是在 CodeKit 或 Simpless 中本地编译的。 问题四...

在搜索字段上选择2搜索图标

我将 select2 与 bootstrap3 一起使用。 https://select2.github.io/examples.html 单选框 如何在搜索栏添加搜索图标？ 像这样： https://fk.github.io/select2-bootstrap-css/ 这……

Selectpicker（引导选择）取消关注更改

我正在使用隐藏的锚点来取消对更改的引导选择，如下所示： HTML： 我正在使用隐藏的锚点来取消对更改的引导选择，如下所示： HTML： <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address"> <option id="1" value="1" selected >First address</option> <option id="2" value="2" >Second address</option> </select> jQuery： $("#SelectAddress").on("change", function() { //...mycode... $("#AFocus").focus(); }); $("#AFocus").focus(); 使选择选择器失去焦点，但它也使目标页面上升。 AFocus 位于页面顶部，所以... 如何在不使用像我的AFocus这样的锚标记而不滚动页面的情况下取消选择选择器的焦点？ 这是一个示例：http://jsfiddle.net/ya0o7hzb/向下滚动页面以查看 bootstrap-select。 bootstrap-select 将在 DOM 中添加一些 HTML，如下所示： <div class="btn-group bootstrap-select"> <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="SelectAddress" title="Address 1" aria-expanded="false"> <span class="filter-option pull-left"> Address 1</span> &nbsp;<span class="bs-caret"> <span class="caret"> </span> </span> </button> <div class="dropdown-menu open" role="combobox" style="padding-top: 0px; max-height: 297px; overflow: hidden; min-height: 37px;"> <div class="popover-title"> <button type="button" class="close" aria-hidden="true"> ×</button> Select an address</div> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 248px; overflow-y: auto; min-height: 0px;"> <li data-original-index="1" class="selected"> <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"> <span class="text"> Address 1</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="2" class=""> <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text"> Address 2</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> </ul> </div> <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address" onchange="blur_picker('SelectAddress')" tabindex="-98"> <option class="bs-title-option" value=""> Select an address</option> 所以你必须blur()包含类btn的按钮： $(".btn").blur(); 工作示例：http://jsfiddle.net/93ohvn0j/ 试试这个。这可能会起作用。 <select id="SelectAddress" name="SelectAddress" class="selectpicker" title="Select an address" data-header="Select an address" onChange="blur_picker('SelectAddress')"> <option id="1" value="1" selected >First address</option> <option id="2" value="2" >Second address</option> function blur_picker ( element ) { element = document.getElementById(element); element.blur; } 希望这有帮助！

使用带有引导模式的 select2 库禁用搜索

我正在尝试使用 php 在我的页面中使用 select2 库，一切都工作完美，甚至表现良好，但问题是我无法搜索任何内容，默认情况下禁用搜索，这是我...

如何在html中翻转svg路径？

我想使用引导程序中的图标，但我需要它垂直翻转： https://icons.getbootstrap.com/icons/arrow-left-right/ 我宁愿需要一个左右箭头，这样上面的箭头......

如何使用bootstrap消除额外的html正文高度

我正在使用引导程序，并在我的身体末端得到大量的“空白”。 Bootstrap 似乎是手动设置我的 html 正文的高度，我无法覆盖它。有没有人...

摆脱页脚下方的空白

我使用的是bootstrap 3.0框架，无论我做什么，我都无法让页脚后的小空白消失。它只在Chrome中显示，在IE中没问题。 我使用了最小高度，

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。 例如，我想放置不同大小的

如何在Bootstrap 4中将不同尺寸的图像放入轮播中？

我在 Bootstrap 4 中将不同尺寸的图像放入轮播中时遇到问题。如何将不同尺寸的图像放入此轮播中。 例如，我想放置不同大小的

带有 HTML 内容的 Bootstrap 4 弹出框

这是我的代码，但它不起作用。 当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示 PopOver 并且 HTML 源格式错误。 这是我的代码，但它不起作用。 当我使用内容中包含 HTML 的本机 Bootstrap PopOver 时，前端不会显示该 PopOver 并且 HTML 源格式错误。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 删除类属性。 它可以工作。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <style> .popover{ color: #757575 !important; } </style> </head> <body> <div class="container"> <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span> </div> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> </body> </html> 我试图在引导弹出窗口中显示 HTML，但不知何故它不起作用。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。 请记住在弹出框元素上设置 data-html="true"（以及其他 data- 属性）。否则 HTML 内容将无法正确呈现。 更多详细信息可以在 Bootstrap 文档中找到：https://getbootstrap.com/docs/4.6/components/popovers/#options 只需将 popover 类用单引号括起来即可。 <div class='popover'>text text</div> 而不是 <div class="popover">text text</div> $element.popover({ animation: false, html: true, sanitize: false, placement: 'bottom', trigger: 'manual', content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>', }); 您可以像这样使用它，而不是向所有弹出窗口添加 data-html="true"： $('[data-toggle="popover"]').popover({html:true});

如何在第一个周期停止引导轮播

我希望滑块开始滑动，并且它应该在幻灯片/轮播的第一张图像上的第一个周期停止。 var imgCount = 3; $('#myCarousel').carousel({ 间隔：2500 }); $('#myCarousel').bind(...

通过 Bootstrap4 对列进行排序

我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： 1 我有 3 列，我想在桌面和移动设备上以不同的方式订购。 目前，我的网格如下所示： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 在移动视图中我希望有以下输出： 1-3-2 不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。 2021 - Bootstrap 5 响应式订购类现在为 order-first、order-last 和 order-0 - order-5 演示 2018 - Bootstrap 4 响应式订购课程现在为order-first、order-last和order-0 - order-12 Bootstrap 4 **push** **pull** 类现在为 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}`，并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmebUp)（这只适用于 4.0 beta 之前的版本） 引导程序4.1+ 由于 Bootstrap 4 是 Flexbox，因此很容易更改列的顺序。列可以从 order-1 到 order-12 进行排序，例如相对于父级 order-md-12 order-2 的 md（最后一个在 xs，第二个在 .row）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> 演示：使用order-*类更改顺序 桌面（较大屏幕）： 移动设备（较小的屏幕）： 还可以使用 flexbox 方向实用程序... 更改列顺序 <div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> 演示：Bootstrap 4.1 使用 Flexbox 方向更改顺序 旧版本演示 演示 - 阿尔法 6 演示 - 测试版 (3) 查看更多 Bootstrap 4.1+ 订购演示 相关 Bootstrap 4 中使用推/拉和 col-md-12 的列排序 Bootstrap 4 更改列的顺序 A-C-B A-B-C 这也可以通过 CSS“Order”属性和媒体查询来实现。 类似这样的： @media only screen and (max-width: 768px) { #first { order: 2; } #second { order: 4; } #third { order: 1; } #fourth { order: 3; } } CodePen 链接：https://codepen.io/preston206/pen/EwrXqm 即使这样也行： <div class="container"> <div class="row"> <div class="col-4 col-sm-4 col-md-6 order-1"> 1 </div> <div class="col-4 col-sm-4 col-md-6 order-3"> 2 </div> <div class="col-4 col-sm-4 col-md-12 order-2"> 3 </div> </div> </div> 我正在使用 Bootstrap 3，所以我不知道是否有更简单的方法来实现 Bootstrap 4，但这个 css 应该适合你： .pull-right-xs { float: right; } @media (min-width: 768px) { .pull-right-xs { float: left; } } ...并将类添加到第二列： <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6 pull-right-xs"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> 编辑： 哦...看起来我上面写的正是 Bootstrap 4 中的 .pull-xs-right 类：X 只需将其添加到第二列，它应该可以完美工作。 将此类用于第一列 第二个： 第三： 由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您将需要使用以下内容（如 codeply 4 Flexbox 顺序演示 - 提供的 alpha/beta 链接中所示）在答案中）。 <div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-block">1</div> </div> <div class="col-6 col-md-12 flex-md-last"> <div class="card card-block">3</div> </div> <div class="col-3 col-md-6 "> <div class="card card-block">2</div> </div> </div> 但请注意，“Flexbox order demo - beta”进入了 alpha 代码库，并将代码库更改为 Beta（并运行它）会导致 div 错误地显示在单列中 - 但这看起来像是一个 codeply 问题，因为切割并将代码粘贴到 codeply 之外的工作方式如上所述。 您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上

有没有办法在 Github Wiki 上显示进度条？

我想在 Github Wiki 上展示我的项目当前迭代的进度。但是我找不到办法做到这一点。 我正在寻找类似于 Bootstrap 进度条的东西......