[英]Bootstrap progress bar is not showing in mobile view
I'm using this code for a progress bar and it's working fine on my laptop and on other desktop devices but in mobile view progress bar is not showing: 我正在将此代码用于进度条,并且在笔记本电脑和其他台式机设备上都可以正常工作,但是在移动视图中进度条未显示:
<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>
I changed your col-sm-6
classes to col-6
to prevent the labels from stacking on the smallest screens. 我将您的
col-sm-6
类更改为col-6
以防止标签堆积在最小的屏幕上。 The progress bar itself is showing up as expected on the smallest screens. 进度条本身会在最小的屏幕上按预期显示。
Click the "run code snippet" button below: 点击下面的“运行代码段”按钮:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.