将 Bootstrap navBar 对齐一行答案

【问题标题】：Align Bootstrap navBar in one line将 Bootstrap navBar 对齐一行
【发布时间】：2016-04-12 18:56:27
【问题描述】：

我用 Bootstrap 制作了一个导航栏，它在不同的分辨率下看起来不同。如果屏幕变小，它看起来像这样：

图一：

图2：

图3：

图片 1 和 2 很好，这就是我想要的样子。但是在图 3 中，所有内容都可以放在两行中，但它被分成三行。 我需要将所有内容分成两行。我尝试使用 css，但无法解决。这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
        <link rel="stylesheet" href="css/design.css" />
    </head>

    <body>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <span class="visible-xs navbar-brand">Startseite</span>
                </div>
                <div class="navbar-collapse collapse" id="navBar">
                    <ul class="nav navbar-nav navInline">
                        <li class="hidden-xs"><a href="#" style="font-size:18px; padding: 15px 8px 15px 0px;">Startseite</a></li>
                        <li><a href="index.html" class="navBarItem">Telefonliste ABC</a></li>
                        <li><a href="index.html" class="navBarItem">Telefonliste ABC</a></li>
                        <li><a href="index.html" class="navBarItem">Telefonliste ABC</a></li>
                        <li><a href="index.html" class="navBarItem">Telefonliste ABC</a></li>
                        <li><a href="index.html" class="navBarItem">Telefonliste ABC</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Administration<span class="caret" style="padding-left:0px;"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#1">Stuff</a></li>
                                <li><a href="#2">Stuff</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <div class="trennlinie visible-xs"></div>
                        <li class="navLi"><span class="navLiInner" id="clock">01.01.1970 - 00:00:00</span></li>
                        <li class="navLi"><span class="navLiInner">NAME (TODO)</span></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
</html>

CSS：

.nav > li  > .navBarItem
{
    padding-left: 8px;
    padding-right: 8px;
}

.navBarItem:focus
{
    outline: none;
}

.navLi
{
    padding:15px;
}

.navLiInner
{
    color: #9D9D9D;
    text-shadow: 0px -1px 0px rgba(0,0,0,.25)
}

.navInline
{
    display: inline;
}

.trennlinie
{
    border-bottom: 1px solid #383838;
    box-shadow: 0px -1px 0px 0px #000000;
    margin-top: 4px;
    margin-bottom: 4px;
}

感谢任何形式的帮助。亲切的问候:)

【问题讨论】：

我认为这里没有问题 - jsfiddle.net/1q7jtotz。
是的，因为我删除了两个 li 元素以保持代码量小。太傻了，我马上加起来
抱歉，我自己也应该注意到这一点。我会尝试修改一下，但@Vincent G 的字体大小可能是正确的。
在不改变字体大小的情况下无论如何都是可能的......
不，不是。我尝试删除列表和行的每个外边距/填充，它仍然在三行上。你必须使用字体大小和链接填充来做到这一点。

标签： html css twitter-bootstrap twitter-bootstrap-3 inline

【解决方案1】：

减少font-size 和padding，它应该适合like this

.nav > li  > .navBarItem
{
    padding-left: 4px;
    padding-right: 4px;
    font-size: 12px;
}

【讨论】：

这确实按我的意愿显示，但不能解决问题。我想保持一切不变，除了将它们全部放在两行中，填充和字体大小相同。
jsfiddle.net/pkk7vr2h/4 我删除了外边距和内边距，但效果不太好......您必须更改字体大小以使其适合并看起来正确，因为元素数量..