# 使用您自己的样式自定义帖子的内容

**URL:** <https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738>\
**Category:** Developer Guides\
**Tags:** css\
**Created:** [2023年三月10日 18:18 UTC](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738 "2023-03-10T18:18:34Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年三月10日 23:44 UTC](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738/6 "2023-03-10T23:44:02Z")

</div>

> [@UnitedFreedom](#):
>
> 太复杂了

当然，这取决于您打算在其中放置什么，但要实现与您的示例完全相同的视觉效果，您可以大大优化您的代码：

```plaintext
[wrap="card-header"] **卡片标题** [/wrap]
[wrap="card-body"]
**卡片标题**

卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本，卡片文本
[/wrap]

```

```css
[data-wrap="card-header"] {
    padding: 0.5em 1em;
    border: 1px solid rgba(0,0,0,.125);
    border-bottom: 0;
    background: #007bff;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

[data-wrap="card-body"] {
    padding: 1em;    
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0 0 5px 5px;
}

```

 ![Bootstrap card](https://global.discourse-cdn.com/meta/original/4X/a/d/8/ad8b69805b98122c37b7f9035d03ea9fe1c7abc3.png)

---

_[View the full topic](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738)._