引导进度条未在移动视图中显示

Posted

技术标签:

【中文标题】引导进度条未在移动视图中显示【英文标题】:Bootstrap progress bar is not showing in mobile view 【发布时间】:2018-07-28 13:42:58 【问题描述】:

我正在将此代码用于进度条,它在我的笔记本电脑和其他桌面设备上运行良好,但在移动视图中没有显示进度条:

<div class="container">
<div class="progress ">
<div class="progress-bar progress-bar-striped active" role="progressbar"  aria-valuenow="0" aria-valuemin="0" aria-valuemax="0" style="width:0%">
</div>
</div>
 <div class="row progress-row"><div class="col-sm-6" style="text-align:    left;">$0</div>
 <div class="col-sm-6" style="text-align: right;">$29,000,000</div></div>                    
                       ICO STARTS IN 
 </div>

【问题讨论】:

【参考方案1】:

我将您的 col-sm-6 类更改为 col-6 以防止标签在最小的屏幕上堆叠。进度条本身在最小的屏幕上按预期显示。

点击下方“运行代码sn-p”按钮:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container mt-5">
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0" style="width:0%">
        </div>
    </div>
    <div class="row progress-row">
       <div class="col-6">$0</div>
       <div class="col-6 text-right">$29,000,000</div>
    </div>                    
    ICO STARTS IN 
</div>

【讨论】:

以上是关于引导进度条未在移动视图中显示的主要内容,如果未能解决你的问题,请参考以下文章

不可见的进度条未通过代码显示

Bootstrap 4 进度条未显示

react-bootstrap 的进度条未显示

带有英雄单元文本的 Twitter Bootstrap 进度条未正确显示

单击页面上的任意位置后,Android中的进度条未显示

使用引导进度条以模态显示上传进度