更薄的 Bootstrap 进度条？答案

【问题标题】：Thinner Bootstrap progress bars?更薄的 Bootstrap 进度条？
【发布时间】：2014-06-18 07:45:06
【问题描述】：

如何使用 Bootstrap 3.0 使进度条变细？我在想 YouTube 喜欢/不喜欢仪表的外观（蓝色条）。我试过搜索任何 CSS 技巧，但找不到任何东西。

【问题讨论】：

请分享一些代码，因为我不确定我是否理解你想要的。减少填充或其他东西应该可以解决问题。
我在看这个：metroui.org.ua/progress-bar.html（特别是第二个蓝条）。但我希望有一种快速的方法来实现它，而无需安装他们定制的 Bootstrap。

【解决方案1】：

就这么简单：

.progress {height: 10px;}

见：Reduce the height of progress bar

额外，如果你想在进度条内显示文字：

.progress {height: 20px;} // we increased it so the text is visible or change font size
.progress .sr-only { position: relative; }

见：Show text inside progress bar

【讨论】：

如果您在进度条内使用文本，您可以将其与.progress-bar { line-height: 10px; }垂直对齐

【解决方案2】：

Shina 是对的，我只是想补充一下，在某些情况下可能需要添加 !important 命令以使更改应用于“progress”类的已设置参数，如下所示：

.progress {height: 10px !important;}

【讨论】：

【解决方案3】：

您可以按照以下在样式表中创建.progress-sm（小进度）和.progress-lg（大进度）css自定义类，然后轻松使用。

.progress-sm{
  height: 0.5rem !important;
}
.progress-lg{
  height: 1.5rem !important;
}

适合小型

<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

默认

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

大型

<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress-sm {
  height: 0.5rem!important;
}

.progress-lg {
  height: 1.5rem!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<h5>For Small</h5>
<div class="progress progress-sm">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Default</h5>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<h5>For Large</h5>
<div class="progress progress-lg">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

【讨论】：

【解决方案4】：

你也可以使用：

<div class='.progress-sm'> ...your code ... </div>

我相信这是最好的解决方案，因为您将使用引导类。

【讨论】：

类名不应以. 开头。 progress-sm 不是有效的引导类，但需要创建。