我将此代码用于进度条,它在我的笔记本电脑和其他桌面设备上正常工作,但在移动视图中没有显示进度条:
<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>
答案 0 :(得分:0)
我将您的col-sm-6
课程更改为col-6
,以防止标签在最小的屏幕上堆叠。进度条本身在最小的屏幕上显示为预期。
点击下面的“运行代码段”按钮:
<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>