Question

如何使用Bootstrap 3.0使进度条更薄？我在想YouTube喜欢/不喜欢米的样子（蓝色条）。我试过搜索任何CSS技巧但找不到任何东西。

Answer 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

Answer 2

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

.progress {height: 10px !important;}

Answer 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>

Answer 4

你也可以使用：

doSomething

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

更薄的Bootstrap进度条？

4 个答案: