Bootstrap Navbar上的帐户信息

Question

我一直在四处搜寻，但终生找不到答案。

我正在尝试将PHP登录信息（欢迎用户 /我的帐户/注销）放在引导导航栏中，但是无论我做什么，我都无法使其在navitem旁边的左侧而不是上面的位置对齐！

物品的位置1

这是我现在拥有的代码：

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

谁能告诉我将代码移至何处，或进行哪些修改以使其对齐？

Answer 1

您在品牌内部使用了div，默认情况下它们具有块布局。 他们将把周围的内容推到下一行。 您可能应该使用跨度或锚点，默认情况下它们具有嵌入式布局。

这是一些工作代码（ 小提琴 ）...

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

引导程序示例非常有帮助。

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

Answer 2

用col-sm-6将欢迎用户文本包装在自己的div中，可以达到目的。 当然，您可能希望以此固定在移动菜单上的位置。

    <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>
            <div class="collapse navbar-collapse navbar-ex1-collapse" id="scrollTarget">
                <div>
                    <div class="brand col-sm-6">
                        <div class="welcome">Welcome,user<br/>
                            <a href="?action=account">My Account</a> | 
                            <a href="?logout">Logout</a></div></p>
                        </div>
                    </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>
            </div>
        </nav>
    </div>
</header>

Answer 3

经过更多的研究，结果比上面提到的答案还要容易。 （尽管这些也可以！）

<div><p class="navbar-text">Login info/text here</p></div

就是全部。 navbar-brand用于图像，这是我做错的。