# 如何更改标题中按钮的顺序？

**URL:** <https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345>\
**Category:** UX\
**Created:** [2020年八月28日 12:18 UTC](https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345 "2020-08-28T12:18:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![anton21m](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anton21m/32/192023_2.png) [@anton21m](https://meta.discourse.org/u/anton21m)\
**Post date:** [2020年八月28日 12:18 UTC](https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345/1 "2020-08-28T12:18:07Z")

</div>

大家好，我想彻底重做 Discourse 的头部导航栏。

我们公司的设计师为我草拟了这样一个设计方案，但我借助 CSS 未能完全实现。

不过，我遇到了一个问题：想把个人资料按钮移到最前面。我查阅了相关资料，找到了 `\app\assets\javascripts\discourse\app\widgets\header.js` 这个文件。

参考这个帮助，我成功移除了生产环境中的图标，并做了一些其他调整（参考链接：[https://meta.discourse.org/t/solved-how-to-use-virtual-doms-h-helper-in-head-for-header-dropdown-hamburger-widget-override-how-to-override-computed-method/104583）。](https://meta.discourse.org/t/solved-how-to-use-virtual-doms-h-helper-in-head-for-header-dropdown-hamburger-widget-override-how-to-override-computed-method/104583%EF%BC%89%E3%80%82)

但我还是无法移动按钮。

目前论坛的显示效果如下：

 ![Screenshot_2](https://global.discourse-cdn.com/meta/original/3X/d/8/d8e87aa06072e45af544dc2192cc021127591274.png)

而我们需要的是这样（移动账户按钮并更改图标）：

 ![Screenshot_1](https://global.discourse-cdn.com/meta/original/3X/1/7/171f4282e445bcee3c6aceeadcbf395d10d411ff.png)

请问我应该从哪些方面入手来实现这个需求？

---

<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年八月29日 02:34 UTC](https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345/2 "2020-08-29T02:34:07Z")

</div>

你可以用 CSS 实现类似的效果：

```css
.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}

```

---

<div class="post-metadata">

**Author:** ![anton21m](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anton21m/32/192023_2.png) [@anton21m](https://meta.discourse.org/u/anton21m)\
**Post date:** [2020年八月31日 06:50 UTC](https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345/3 "2020-08-31T06:50:39Z")

</div>

谢谢，非常好。

> [@awesomerobot](#):
>
> 你可以用 CSS 实现类似的效果：
> 
> ```css
> .panel .d-header-icons {
> display: flex;
> }
> .d-header-icons #current-user{
> order: 1;
> }
> .d-header-icons .header-dropdown-toggle {
> order: 2;
> }
> 
> ```

稍微修改一下后对我很有帮助。

---

<div class="post-metadata">

**Author:** ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)\
**Post date:** [2020年九月2日 06:50 UTC](https://meta.discourse.org/t/how-can-i-change-the-order-of-buttons-in-header/162345/4 "2020-09-02T06:50:40Z")

</div>

此主题在最后一次回复后 2 天自动关闭。不再允许新回复。