# 徽章页面中的信任等级排序展览

**URL:** <https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610>\
**Category:** Support\
**Created:** [2020年二月14日 14:23 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610 "2020-02-14T14:23:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jenni\_alencar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jenni_alencar/32/169068_2.png) [@jenni\_alencar](https://meta.discourse.org/u/jenni_alencar)\
**Post date:** [2020年二月14日 14:23 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/1 "2020-02-14T14:23:56Z")

</div>

我修改了信任等级的名称，但这导致徽章页面显示的顺序发生了变化。例如，信任等级 1 显示在信任等级 2 之后。有办法调整这个顺序吗？

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/b/cb2fcaf9580a3f0d77927f38ee8ee539eff3dab7.png)

BetaUser 应该显示在 BetaTester 之前，我该如何操作？

---

<div class="post-metadata">

**Author:** ![AndreSpecker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrespecker/32/139050_2.png) [@AndreSpecker](https://meta.discourse.org/u/AndreSpecker)\
**Post date:** [2020年二月14日 14:44 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/2 "2020-02-14T14:44:23Z")

</div>

按字母顺序排列

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2020年二月14日 14:55 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/3 "2020-02-14T14:55:19Z")

</div>

您可以使用 CSS 来实现，例如：

```css
.badge-card.betauser {
    order: -1;
}

```

由于当前的徽章页面布局是基于 Flexbox 构建的，如果您更改了顺序，可能还需要在不同屏幕宽度下调整一些边距。

```css
.badge-card.betauser {
    order: -1;
  @media screen and (max-width: 850px) {
    margin-right: 1.63%
  }
}

.badge-card.betatester {
  @media screen and (max-width: 850px) {
    margin-right: 0;
  }
}

```

今年晚些时候，当我们停止支持 IE11 后，就不再需要调整边距了（因为届时我们可以使用 Grid 而不是 Flexbox 来构建布局）。

---

<div class="post-metadata">

**Author:** ![jenni\_alencar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jenni_alencar/32/169068_2.png) [@jenni\_alencar](https://meta.discourse.org/u/jenni_alencar)\
**Post date:** [2020年二月14日 15:11 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/4 "2020-02-14T15:11:07Z")

</div>

我在哪里可以找到徽章的 CSS 文件？您能告诉我路径吗？谢谢

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2020年二月14日 15:31 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/5 "2020-02-14T15:31:12Z")

</div>

您可以在 `管理 > 自定义 > 主题` 下添加自定义 CSS。找到相关 CSS 类最简单的方法是：右键点击您想要编辑的页面元素，然后在浏览器中检查它。

否则，您必须深入浏览 Discourse 的源代码以参考（注意：您无法直接编辑 Discourse 的 CSS……您需要在主题中覆盖所需的部分）。徽章页面的 CSS 位于此文件中：[discourse/app/assets/stylesheets/common/base/user-badges.scss at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/user-badges.scss)

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2020年三月15日 15:42 UTC](https://meta.discourse.org/t/trust-levels-order-exhibition-in-the-badges-page/141610/6 "2020-03-15T15:42:51Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.