Bootstrap Navbar上的帐户信息

Question

I've been searching far and wide, and cannot for the life of me find the answer.

I'm trying to put PHP login info (Welcome user / My Account / Logout) on the bootstrap navbar, but no matter what I do, I can't get it to align on the left next to the navitems instead of above!

Location of the items 1

This is the code I have right now:

<header id="mainHeader" class="navbar-fixed-top" role="banner">
<div class="container">
     <nav class="navbar navbar-inverse scrollMenu" role="navigation">
     <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>                         <a class="brand">
     <div class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget">
     <div>
        <p class="brand"><div class="welcome">Welcome, <?php echo $_SESSION['user']['username']; ?><br/><a href="?action=account">My Account</a> | <a href="?logout">Logout</a></div></p></div>
        <ul class="nav navbar-nav pull-right">
        <li><a href="?action=projects"><i class="icon-briefcase"></i>Projects</a></li>
        <li><a href="?action=clients"><i class="icon-users"></i>Clients</a></li>
        <li><a href="?action=admins"><i class="icon-user"></i>Admin</a></li>
        <li><a href="?action=settings"><i class="icon-wrench"></i>Settings</a></li>
    </ul>
    </div>
        </nav>
 </div>
</header>

can anyone tell me where to move the code, or what to modify to get it to line up?

Answer 1

You are using divs inside of your brand, which have block layout by default. They're going to push surrounding content to the next line. You should probably be using spans or anchors, which have an inline layout by default.

Here's some working code (fiddle)...

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <p class="navbar-text"><span class="welcome">Welcome, username</span> <br><a href="#" class="navbar-link">My Account</a> | <a href="#" class="navbar-link">Logout</a>
      <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Projects</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Admin</a></li>
            <li><a href="#">Settings</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

The bootstrap examples are very helpful.

http://getbootstrap.com/components/#navbar http://getbootstrap.com/components/#navbar-text