为什么我的导航栏中的右对齐文本向右移动太远？ [英] Why is right-aligned text in my navbar shifted too far to the right?
本文介绍了为什么我的导航栏中的右对齐文本向右移动太远？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试在导航栏的右侧显示一些文字。文档声明这样的文本必须位于 p 标记内，而类 navbar-text 和 navbar-right 应该应用于此标记。我这样做了，但文字偏离了太远。这是我的浏览器显示的内容：
com / pbWqL.pngalt =Navbar>
这是我的HTML：
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtmlxmlns：th =http://www.thymeleaf.org>
< head>
< title> Demo< / title>
< meta http-equiv =Content-Typecontent =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.jsth：src =@ {/ webjars / jquery / 2.1.3 / jquery.min。 JS}>< /脚本>
< 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}>< /脚本>
< / head>
< body>
< nav class =navbar navbar-inverse navbar-static-toprole =navigation>
< div class =container-fluid>
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃main-nav>
< span class =sr-only>导航ein- / ausblenden< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =＃>应用程式< / a>
< / div>
< div class =collapse navbar-collapseid =main-nav>
< ul class =nav navbar-nav>
< li>< a href =＃>连结1< / a>< / li>
< li>< a href =＃>连结2< / a>< / li>
< li>< a href =＃>连结3< / a>< / li>
< li>< a href =＃>连结4< / a>< / li>
< li>< a href =＃>连结5< / a>< / li>
< / ul>
< p class =navbar-text navbar-right> Angemeldet als Max Mustermann< / p>
< / div>
< / div>
< / nav>
< / body>
< / html>
我缺少什么？
解决方案
这是因为Bootstrap 3.3.0中引入的错误而发生的。已经有问题以及 pull request 在GitHub上。
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?
解决方案
This 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.
这篇关于为什么我的导航栏中的右对齐文本向右移动太远？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
