bootstrap navbar -right搞砸了

时间:2015-06-27 07:30:39

标签: html css twitter-bootstrap

我想在我的网页上显示一个导航栏。右侧有两个元素:如果用户没有登录,则应该登录并注册;如果用户已经登录,则应为“嗨,>用户名<”和注销。我的代码仅在用户未登录时才有效。登录后,右侧部分变为: 嗨,退出

  

用户名和LT;

请帮帮我。

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    </button>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="member.php?lang=en">English</a></li>
      <li><a href="member.php?lang=zh">中文</a></li>
      <li><a href="<?php echo lnkIndex; ?>"><img alt="KnowSG.com" src="images/knowsg_icon.png" style="height:20px"/></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <?php
        if(isset($_SESSION["valid_user"])) {
          $msg = "<li>Hi, <a href=\"".lnkMember."\">".$_SESSION["valid_user"]."</a></li><li><a href=\"".lnkLogout."\">".strLogout."</a></li>";
          echo $msg;
        }
        else {
          echo "<li><a href=\"".lnkLogin."\">".strLogin."</a></li><li><a href=\"".lnkRegister."\">".strRegistr."</a></li>";
        }
      ?>
    </ul>
  </div>
</div>
</nav>

1 个答案:

答案 0 :(得分:1)

您需要在<p class="navbar-text">内使用<li>,如下所示:

<ul class="nav navbar-nav navbar-right">
    <li>
        <p class="navbar-text">
            Hi, <a href="/foo.php" class="navbar-link">USER</a>
        <p>
    </li>
    <li><a href="/bar.php">Log out</a></li>
</ul>

navbar-link不是强制性的,它使用户名为灰色而不是蓝色)