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>

导航栏注销按钮

1 个答案: