html - 导航栏中的文本移动到折叠菜单切换下方 - 如何正确对齐它？

Question

在较小的设备上，文本(“JH”)当前移动到导航栏左侧的折叠菜单切换下方 - 有没有办法对齐它，以便“JH”与菜单切换水平但在右侧导航栏的一侧呢？我正在为如何实现这一目标而苦苦挣扎，但我确信这非常简单。非常感谢，乔恩

我的代码如下:-

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
            data-toggle="collapse" type="button"><span class=
            "icon-bar"></span> <span class="icon-bar"></span> <span class=
            "icon-bar"></span></button>
        </div>
            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <a href="http://www.jonhowlett.uk/home.html" class="navbar-brand">JH</a>
                </li>
            </ul>
        <div class="navbar-collapse collapse" id="navbar">


            <ul class="nav navbar-nav navbar-right">

                <li>
                    <a href="about.html"><span>About</span></a>
                </li>                       

                <li>
                    <a href="resume.html"><span>Resume</span></a>
                </li>                   

                <li>
                    <a href="portfolio.html"><span>Portfolio</span></a>
                </li>

                 <li>
                    <a href="blog.html"><span>Blog</span></a>
                </li>

                <li>
                    <a href="#"><span>Contact</span></a>
                </li>                   
            </ul>
        </div>
    </div>
</nav>

http://www.jonhowlett.uk/

Answer 1

放这个

<ul class="nav navbar-nav navbar-left">
    <li class="active">
        <a href="http://www.jonhowlett.uk/home.html" class="navbar-brand">JH</a>
    </li>
</ul>

内部<div class="navbar-header">

<div class="navbar-header">
    <button class="navbar-toggle" data-target=".navbar-collapse"
    data-toggle="collapse" type="button"><span class=
    "icon-bar"></span> <span class="icon-bar"></span> <span class=
    "icon-bar"></span></button>
    <ul class="nav navbar-nav navbar-left">
        <li class="active">
            <a href="http://www.jonhowlett.uk/home.html" class="navbar-brand">JH</a>
        </li>
    </ul>
</div>