# 移动版本未显示类别描述

**URL:** <https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016>\
**Category:** Feature\
**Created:** [2020年五月11日 07:19 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016 "2020-05-11T07:19:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bärbel\_Hucke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b%C3%A4rbel_hucke/32/176263_2.png) [@Bärbel\_Hucke](https://meta.discourse.org/u/B%C3%A4rbel_Hucke)\
**Post date:** [2020年五月11日 07:19 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/1 "2020-05-11T07:19:54Z")

</div>

你好，我们的分类描述在移动版本中未显示。您能帮我一下吗？我对 CSS 不太熟悉，但每天都在学习一点点。

桌面端

 ![Dektop](https://global.discourse-cdn.com/meta/original/3X/9/6/968ace4f43eac2ac156f7be43c3efc3c428236a6.jpeg)

移动端

 ![Screenshot_20200508_091835](https://global.discourse-cdn.com/meta/original/3X/f/6/f699c77ff5fb15f5c41b48fc0216f6302192833f.jpeg)  
感谢您的支持。

---

<div class="post-metadata">

**Author:** ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)\
**Post date:** [2020年五月11日 07:35 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/2 "2020-05-11T07:35:09Z")

</div>

您可以尝试将以下代码添加到 CSS 中：

```plaintext
@media only screen and (max-width: 601px){
    .category-list.with-topics .category-list-item .category-description {
        display: table-row;
    }
}

```

---

<div class="post-metadata">

**Author:** ![Bärbel\_Hucke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b%C3%A4rbel_hucke/32/176263_2.png) [@Bärbel\_Hucke](https://meta.discourse.org/u/B%C3%A4rbel_Hucke)\
**Post date:** [2020年五月11日 07:52 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/3 "2020-05-11T07:52:57Z")

</div>

太好了，非常感谢！

我可以再问两个问题吗？

- 是否可以将描述直接放在图标旁边？
- 如何更改蓝色按钮中的字体颜色？我在主题的颜色设置中找不到这个按钮

 ![Screenshot_20200511_094100](https://global.discourse-cdn.com/meta/original/3X/f/e/fe656246a8ab155df8ac4e00afb53cf7e5c4b83e.jpeg)

谢谢！

---

<div class="post-metadata">

**Author:** ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)\
**Post date:** [2020年五月11日 08:06 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/4 "2020-05-11T08:06:28Z")

</div>

这两个元素相隔较远，因此仅通过 CSS 进行修改非常困难，或者可能会破坏其他组件。  
总的来说，这是一个临时性的更改。  
按钮的背景色已更改，因此我们可以使用 CSS 类来调整文本颜色：

```plaintext
.list-controls .container #create-topic {
    color: #fff;
}

```

颜色变量：[Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-a)

---

<div class="post-metadata">

**Author:** ![Bärbel\_Hucke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b%C3%A4rbel_hucke/32/176263_2.png) [@Bärbel\_Hucke](https://meta.discourse.org/u/B%C3%A4rbel_Hucke)\
**Post date:** [2020年五月11日 08:12 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/5 "2020-05-11T08:12:11Z")

</div>

这很有帮助！非常感谢！

---

<div class="post-metadata">

**Author:** ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)\
**Post date:** [2022年十二月4日 03:56 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/6 "2022-12-04T03:56:35Z")

</div>

您好 @Bcat，感谢您提供用于在移动设备上添加描述的有用 CSS 代码。

是否可以在移动设备上让描述显示在图片右侧，而不是图片下方？

就像这样？

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97ac26febe85b223ce833dfd3ee88a21faf735a5.jpeg)

---

<div class="post-metadata">

**Author:** ![Jack\_Sparrow](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jack_sparrow/32/244906_2.png) [@Jack\_Sparrow](https://meta.discourse.org/u/Jack_Sparrow)\
**Post date:** [2022年十二月7日 18:28 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/7 "2022-12-07T18:28:32Z")

</div>

应该可以使用简单的 CSS 来实现。将图像浮动到左侧，并将父 div 的位置设置为相对。

---

<div class="post-metadata">

**Author:** ![John\_Shankman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_shankman/32/463009_2.png) [@John\_Shankman](https://meta.discourse.org/u/John_Shankman)\
**Post date:** [2024年十一月13日 18:56 UTC](https://meta.discourse.org/t/description-of-the-category-is-not-displayed-at-mobile-version/151016/8 "2024-11-13T18:56:42Z")

</div>

> [@Bcat](#):
>
> ```plaintext
> @media only screen and (max-width: 601px){
> .category-list.with-topics .category-list-item .category-description {
> display: table-row;
> }
> }
> 
> ```

感谢你的这个方法