twitter-bootstrap - 导航栏注销按钮

Question

我创建了一个导航栏，但无法移动注销按钮，我想将其移动到屏幕右侧。我正在使用 bootstrap 来构建导航栏。

这是我迄今为止使用过的代码。我怎样才能把它移到右边？

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
       <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">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a class="navbar-brand" href="index.html">Logout</a>-->

                <?php    //echo $_SESSION["staffname"];
            if(isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL)//$_SESSION
            {        ?> <a class="navbar-brand">
                     Welcome <?php echo $_SESSION["staffname"];  ?></a>
               <a href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
             <?php
             }
             ?>
            </div>
        </div>
    </nav>

Answer 1

您必须将其拉到右侧并删除 navbar-brand:class="pull-right"。 因为 navbar-brand 是 float-left 样式。

Bootstrap 样式如下:

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

您的代码应该是:

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
   <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">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--<a class="navbar-brand" href="index.html">Logout</a>-->

            <?php    //echo $_SESSION["staffname"];
        if(isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL)//$_SESSION
        {        ?> <a href="logout.php" class="pull-right">    <strong>Logout</strong></a>
<a class="pull-left">Welcome <?php echo $_SESSION["staffname"];  ?></a>

         <?php
         }
         ?>
        </div>
    </div>
</nav>