Question

我一直在寻找远方和广泛，并且不能为我的生活找到答案。

我正在尝试将PHP登录信息（欢迎用户 /我的帐户/注销）放在bootstrap导航栏上，但无论我做什么，我都无法让它在留在navitems旁边而不是上面！

商品的位置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，默认情况下会使用块布局。他们将把周围的内容推到下一行。您应该使用跨度或锚点，默认情况下具有内联布局。

这是一些有效的代码（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>

bootstrap示例非常有用。

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用于图像，这就是我做错了。

Bootstrap Navbar上的帐户信息

3 个答案: