Html 导航栏中的引导下拉菜单：水平对齐图标，而不是垂直堆叠

第一次发布到StackOverflow和new developer，所以请对我放松：-）

我正在使用bootstrap在我的站点上创建导航栏，并且在折叠下拉菜单方面遇到了问题

由于这是我的第一篇文章，图像是不允许嵌入的。 如你所见，我在导航栏的右侧很好地对齐了徽标

我的问题是，当在移动屏幕/更小的屏幕上观看时，垂直堆叠的图标看起来很凌乱

理想情况下，我希望图标保持在一条线上，不会影响它们在全桌面模式下的整体外观。 这是我的HTML代码，全部使用引导，没有更改CSS： `

`

---

非常感谢您的帮助。

尝试使用list Inline类和navbar right，并在li中列出Inline项以进行水平对齐。供参考：谢谢您的回复。我刚刚试过这个，但不幸的是，它不起作用。

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="600">
   <div class="container-fluid" id="navbarText">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#" id="zara"></a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav" id="nav-options">
                        <li><a href="#section1">About</a></li>
                        <li><a href="#section2">Tools</a></li>
                        <li><a href="#section3">Portfolio</a></li>
                        <li><a href="#section4">Contact</a></li>
                    </ul>


                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="mailto:email@address"><span class="fa fa-envelope"></span></a>
                        </li>
                        <li><a><span class="fa fa-phone"></span></a>
                        </li>
                        <li><a href="https://www.linkedin.com/my-profile"><span class="fa fa-linkedin"></span></a>
                        </li>
                        <li><a href="#"><span class="fa fa-github"></span></a></li>
                    </ul>


                </div>
            </div>
        </div>
    </nav>