英文:
Bootstrap 4 Rating with progress bar
问题
使用Bootstrap 4，我想要实现这个效果：
忽略“查看全部”和“4,327 条评分”
到目前为止，我只得到了这个：
无论是5、4、3...的评分，我都可以轻松地用字体图标替代它们。
这是我的代码：
<h4>评分和评论</h4>
<div class="d-flex">
<div class="text-center">
<span class="display-4 font-weight-bolder">3.1</span><br>
<span class="text-black-50">5分满分</span>
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-4 text-right">
5
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
4
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
3
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
2
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
1
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
我如何实现以下效果：
- 使进度条在垂直方向上与文本/星号垂直居中对齐。
- 注意我正在使用Row/Col，但我更喜欢使用flexbox。
- 使用尽可能少的CSS。
英文:
Using Bootstrap 4. I want to achieve this:
Ignore "See All" and "4,327 Ratings"
I ended up only getting this so far:
Doesn't matter the 5, 4, 3... rating. I can easily replace them with font icons.
Here's my code:
<h4>Ratings and Reviews</h4>
<div class="d-flex">
<div class="text-center">
<span class="display-4 font-weight-bolder">3.1</span><br>
<span class="text-black-50">out of 5</span>
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-4 text-right">
5
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
4
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
3
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
2
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-right">
1
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
How do I:
-
Make the progress bar vertically middle align with the text/star.
-
See that I am using Row/Col, but I'd prefer to use flexbox instead.
-
With as minimal CSS as possible.
答案1
得分: 1
Add the class align-items-center to all row elements. By default, rows use flexbox in Bootstrap v4.
英文:
Add the class align-items-center to all row elements. By default, rows use flexbox in Bootstrap v4
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>Ratings and Reviews</h4>
<div class="d-flex">
<div class="text-center">
<span class="display-4 font-weight-bolder">3.1</span><br>
<span class="text-black-50">out of 5</span>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-4 text-right">
5
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-right">
4
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-right">
3
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-right">
2
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-4 text-right">
1
</div>
<div class="col-8">
<div class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论