Question

我尝试在导航栏的右侧显示一些文字。文档声明此类文本必须位于p标记内，并且类navbar-text和navbar-right应应用于此标记。我做到了这一点，但是文字浮动得太远了。右边没有空间。

这是我的浏览器显示的内容： Navbar

这是我的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>

我错过了什么？

Answer 1

这是因为Bootstrap 3.3.0中引入的一个错误。 GitHub上已经有issue和pull request。

Answer 2

如果你想要一些正确的间距。您需要在此课程http://prntscr.com/6fde9s上设置padding-right: 20px或您需要的内容或者，如果您不想要正确的文字，只需向左堆叠导航即可删除此课程http://prntscr.com/6fdeid 如果它不起作用，您需要在float:left !important

上设置.navbar-text

为什么导航栏中的右对齐文本向右移动太远？

2 个答案: