{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Why is right-aligned text in my navbar shifted too》','https://www.manongdao.com/q-877446.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I try to display some text at the right side of a navbar. The docs state that such text must be inside a p tag and the classes navbar-text and navbar-right should be applied to this tag. I did this, but the text floated too far to the right. There is no space left to the right.
This is what my browser displays:
And this is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
th:href="@{/webjars/bootstrap/3.3.2/css/bootstrap.min.css}" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js" th:src="@{/webjars/jquery/2.1.3/jquery.min.js}"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"
th:src="@{/webjars/bootstrap/3.3.2/js/bootstrap.min.js}"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">App</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<p class="navbar-text navbar-right">Angemeldet als Max Mustermann</p>
</div>
</div>
</nav>
</body>
</html>
What am I missing?
If you want some spacing from right. You need to set
padding-right: 20pxor as you need on this class http://prntscr.com/6fde9s or if you don't want right text just stack left to nav you need to remove this class http://prntscr.com/6fdeid if its not work you need setfloat:left !importanton.navbar-textThis happens because of a bug, that was introduced in Bootstrap 3.3.0. There is already an issue as well as a pull request at GitHub.