Html 更改引导的大小'；将标准导航栏缩小到更小的尺寸

我正在尝试将Twitter引导的标准导航栏的大小更改为更小的大小。在导航栏内，我想在左侧显示品牌/徽标，在中间显示一些菜单选项，在右侧显示一些社交媒体图标

到目前为止，我已经把它们排好了，而且我已经能够使它变小。。。然而，当屏幕缩小到一个更小的尺寸（比如手机等）时，社交图标会被放置在菜单选项的右侧，这看起来并不好

我在CSS/HTML中遗漏了什么，使社交图标不位于菜单选项下方

以下是我迄今为止完成的查看源代码的链接：

---

我真的很感激任何人能在这里给我的帮助！提前感谢您。

有很多方法可以完成您所描述的内容

根据我最初对你尝试做的事情的看法：给你带来问题的社交图标是在一个单独的

中，而不是行为正常的链接

---

也许可以尝试使用一个

。还要注意的是，javascript改变了布局，因此简单的css/更好的标记并不是全部答案。

Set

display:block用于图标
，然后使用媒体查询按您的意愿设置其样式。
使用显示：内联块；相反，它是完美的中心：）太棒了！显示：块；在CSS中完成了这个技巧！这样一个简单的解决方案哈哈，谢谢。最后一个简单的问题，你知道我该如何将图标居中，比如图标上方的菜单选项吗？使用display:block；对于菜单选项的ul和显示：内联块；对于图标的ulHmm，当处于桌面大小时，它似乎将图标移动到导航栏下方