# Nav.post-controls 与 show-replies 在某些宽度下溢出

**URL:** <https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897>\
**Category:** UX\
**Tags:** css\
**Created:** [2024 年7 月 4 日 00:20 UTC](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897 "2024-07-04T00:20:32Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
发布日期： [2024 年7 月 4 日 00:20 UTC](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897/1 "2024-07-04T00:20:32Z")

</div>

您好，自从从 3.3.0.beta1 升级到 3.3.0.beta3 后，我遇到了 `nav.post-controls` 溢出并破坏流式布局的问题，当 `show-replies` 按钮出现时尤为明显。在“默认”和“默认（全宽）”主题下，在不同的浏览器宽度、有/无时间线滚动条、有/无侧边栏的情况下，也出现了这个问题：

 ![Screenshot from 2024-07-03 17-40-15](https://global.discourse-cdn.com/meta/original/4X/4/e/0/4e0359a3b0ff8bc7470c175fa2af20f3c8035901.png)  
 ![Screenshot from 2024-07-03 18-31-32](https://global.discourse-cdn.com/meta/original/4X/4/8/d/48db142aba4704db7ae5f95e87e45f83a35e48fd.png)  
 ![Screenshot from 2024-07-03 17-41-32](https://global.discourse-cdn.com/meta/original/4X/5/9/0/5908947e07d38472b324fa3d34311c0b69645200.png)

* * *

这是我目前临时的 CSS 解决方法，但一个合适的上游修复会更好：

```css
.topic-post .post-controls .show-replies {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 5px);
    padding: 1px;
}

@media only screen and (max-width: 675px) {
    .topic-post .post-controls {
        --control-margin: 0;
    }
    
    .topic-post .post-controls .reply { /* Prevent Reply button overflow with very narrow widths */
        padding-right: 0px;
        .d-button-label {
            display: none;
        }   
    }
}

```

---

_[View the full topic](https://meta.discourse.org/t/nav-post-controls-with-show-replies-is-overflowing-at-certain-widths/314897)._