Question

这是默认的bootstrap堆叠进度条。我希望能够在空白区域中显示进度条下的百分比而不是它。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div>
                  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div>
                  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div>
                </div>

＆＃13;

感谢您的帮助。

Answer 1

只需将其放入新的div中，添加一些样式即可完成。例如：

＆＃13;

.progress-desc {
  margin-top: -1.5em;
}
.progress-desc div {
  display: block;
  float: left;
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%"></div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%"></div>
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%"></div>
</div>
<div class="progress-desc">
  <div style="width:13%">13%</div>
  <div style="width:7%">7%</div>
  <div style="width:80%">80%</div>
</div>

＆＃13;

Bootstrap 3进度条百分比将显示在其下方

1 个答案: