twitter-bootstrap 如何移动导航栏注销按钮的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32007777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I move the position of a navbar logout button?
提问by Barry McDaid1982
I have a navbar with a welcome greeting for the user on the left, but I want to move my logout feature to the opposite side on the right. At the moment it sits beside the welcome. Any ideas on how to move it? Here is my code that I have been using.
我有一个导航栏，左侧为用户提供欢迎问候语，但我想将注销功能移到右侧的另一侧。目前它坐在欢迎旁边。关于如何移动它的任何想法？这是我一直在使用的代码。
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!--navbar settings-->
<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)
{ ?> <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>
回答by Dan Mironis
Best way I would think of would be using div with class .navbar-rightfor logout link container:
我想到的最好方法是将 div 与类.navbar-right 一起用于注销链接容器：
<?php $isLoggedIn = (isset($_SESSION["staffId"]) && $_SESSION["staffId"] != NULL) ? true : false; ?>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!--navbar settings-->
<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 if($isLoggedIn): ?>
<a class="navbar-brand">
Welcome <?php echo $_SESSION["staffname"]; ?>
</a>
<?php endif; ?>
</div>
<?php if($isLoggedIn): ?>
<div class="nav navbar-nav navbar-right">
<a href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
</div>
<?php endif; ?>
</div>
</nav>
回答by Sofiene Djebali
Add the class pull-right to your a element :
将类 pull-right 添加到您的 a 元素：
<a href="logout.php" class="navbar-brand pull-right"><strong>Logout</strong></a>
回答by DirtyBit
You can use the pull-right class
您可以使用 pull-right 类
<a href="logout.php" class="navbar-brand pull-right"><strong>Logout</strong></a>
or give the anchor tag an id and style it by using float: right;
或者给锚标签一个 id 并使用它设置样式 float: right;
<style>
#lout
{float: right;}
</style>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!--navbar settings-->
<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)
{ ?> <a class="navbar-brand">
Welcome <?php echo $_SESSION["staffname"]; ?></a>
<a id = "lout" href="logout.php" class="navbar-brand"><strong>Logout</strong></a>
<?php
}
?>
</div>
</div>
</nav>
回答by Keiran van Vuuren
Try using the pull-right class on your anchor element:
尝试在锚元素上使用 pull-right 类：
<a href="logout.php" class="navbar-brand pull-right"><strong>Logout</strong></a>
