Bootstrap NavBar not aligned, especially in mobile view

问题

My navbar seems to go out of whack. It's especially evident when I view the site on my mobile device, or just shrink my desktop window.

Below is a link to my site along with the code. I would love for my name to fit between my projects tap on the left and my e-mail and twitter icons on the right. Thank you for your help and time.

http://jocatcreative.com/

(trying to get past stack socials 2 link limit...

imugr dot com/0s4iJyr

imgur dot com/vqjiyEd)

(Edited to include screenshots)

<div class="navbar navbar-default">
      <div class="container">

            <div class="Heading Tag" align="center"><h2>Jovan S Hernandez</h2></div>


  <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Projects <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">JoCat Creative Media</a></li>
               <li><a href="#">Gesaffelstein Landing</a></li>
               <li><a href="#">Monthly  Resolutions</a></li>
               <li class="divider"></li>
               <li><a href="#">Home</a></li>
               <li class="divider"></li>
            </ul>
         </li>
      </ul>


          <ul class="pull-right">
            <a href="mailto:jovanshernandez@gmail.com"><i class="fa fa-envelope-o"></i> Email Me</a>
            <a href="http://www.twitter.com/jovansn0w"><i class="fa fa-twitter"></i> Twitter</a>
          </ul>
      </div><!-- .container --> 
    </div><!-- .navbar --> 

回答1:

DEMO: https://jsbin.com/qufelu/1/

https://jsbin.com/qufelu/1/edit?html,css,output

You were using some incorrect classes, missing tags (on the right aligned stuff), unclosed tag (collapse), and were using an outdated attribute from ancient history ( align="center") Also, you don't need to wrap the name inside a div.

CSS

.custom-navbar {
    background: transparent;
    border: 0px;
}
@media (max-width:767px) { 
    .custom-navbar .name {
        font-size: 20px;
        float: left;
        margin: 0;
        padding: 15px 0 15px 15px;
    }
    .custom-navbar .navbar-toggle {
        margin: 10px 15px 0 0;
        float: right;
    }
}
@media (min-width:768px) { 
    .custom-navbar .navbar-header {
        width: 100%;
        margin: 0;
    }
    .custom-navbar .name {
        text-align: center;
        float: none;
    }
}

HTML:

<div class="navbar navbar-default custom-navbar">
   <div class="container-fluid">
      <div class="navbar-header">
         <h2 class="name">Jovan S Hernandez</h2>
         <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target="#navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
         <ul class="navbar-right nav navbar-nav">
            <li><a href="mailto:jovanshernandez@gmail.com"><i class="fa fa-envelope-o"></i> Email Me</a></li>
            <li><a href="http://www.twitter.com/jovansn0w"><i class="fa fa-twitter"></i> Twitter</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Projects <b class="caret"></b>
               </a>
               <ul class="dropdown-menu">
                  <li><a href="#">JoCat Creative Media</a></li>
                  <li><a href="#">Gesaffelstein Landing</a></li>
                  <li><a href="#">Monthly  Resolutions</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Home</a></li>
                  <li class="divider"></li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- .navbar-collapse --> 
   </div>
   <!-- .container --> 
</div>
<!-- .navbar -->

来源：https://stackoverflow.com/questions/27259661/bootstrap-navbar-not-aligned-especially-in-mobile-view