twitter-bootstrap 更薄的 Bootstrap 进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23414333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Thinner Bootstrap progress bars?
提问by user2019594
How can I make the progress bars thinner with Bootstrap 3.0? I'm thinking how the YouTube like/dislike meter looks (the blue bar). I've tried searching for any CSS tricks but could not find anything.
如何使用 Bootstrap 3.0 使进度条变细？我在想 YouTube 喜欢/不喜欢仪表的外观（蓝色条）。我试过搜索任何 CSS 技巧，但找不到任何东西。
回答by Shina
As easy as doing this:
就像这样做一样简单：
.progress {height: 10px;}
See: Reduce the height of progress bar
请参阅：降低进度条的高度
Extra, if you want to show the text inside the progress bar:
另外，如果要在进度条内显示文本：
.progress {height: 20px;} // we increased it so the text is visible or change font size
.progress .sr-only { position: relative; }
See: Show text inside progress bar
请参阅：在进度条内显示文本
回答by JCO9
Shina is right, I just would like to add, it may be in some cases necessary to add the !important command to make the change apply over the already set parameter of the "progress" class, like this:
Shina 是对的，我只想补充一点，在某些情况下可能需要添加 !important 命令以使更改应用于“progress”类的已设置参数，如下所示：
.progress {height: 10px !important;}
回答by HDP
You can create .progress-sm(Small progress) and .progress-lg(Large progress) css custom class in your stylesheet according to following and then use it's easily.
您可以根据以下内容在样式表中创建.progress-sm（小进度）和.progress-lg（大进度）css自定义类，然后轻松使用它。
.progress-sm{
height: 0.5rem !important;
}
.progress-lg{
height: 1.5rem !important;
}
For Small
小
<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>
For Default
默认
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
For Large
大型
<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/[email protected]/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>回答by Guimaraesmvf
You could just also use:
你也可以使用：
<div class='.progress-sm'> ...your code ... </div>
<div class='.progress-sm'> ...your code ... </div>
I believe it is the best solution, since you'll use a bootstrap class.
我相信这是最好的解决方案，因为您将使用引导程序类。
