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

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>

Answer 2

您 navbar 添加了 HTML 不必要的内容。参见 docs。

<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>

如果要为品牌添加背景颜色，只需使用 CSS。参见示例。

.navbar.navbar-custom .navbar-brand {
  background: #e7e7e7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
  <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> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>

    </div>
    <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>

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

Text in navbar moves beneath collapsed menu toggle - how can I align this correctly?

html

css

navbar

twitter-bootstrap