Question

我用Bootstrap创建了一个navBar，它在不同的分辨率上看起来不同。如果屏幕变小，它看起来像这样：

图1：

图2：

图3：

Pciture 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;
}

我感谢任何帮助。亲切的问候：）

Answer 1

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

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

将Bootstrap navBar对齐在一行中

1 个答案: