Fatal编程技术网
  • html/
  • Html 将引导导航栏对齐一行

Html 将引导导航栏对齐一行

html css twitter-bootstrap twitter-bootstrap-3

Html 将引导导航栏对齐一行,html,css,twitter-bootstrap,twitter-bootstrap-3,inline,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,Inline,我用Bootstrap做了一个导航条，它在不同的分辨率下看起来不同。如果屏幕变小，则如下所示： 图1： 图2： 图3： 情景1和情景2都很好，这就是我想要的。但在图3中，所有内容都可以放在两行中，但它被分成三行我需要将所有内容都分成两行。我尝试使用css，但无法解决它。这是我的代码： HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /&g

我用Bootstrap做了一个导航条，它在不同的分辨率下看起来不同。如果屏幕变小，则如下所示：

图1：

图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>

.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;
}
我感谢任何帮助。
亲切问候：）

减小
字体大小和
填充
，它应该适合


这确实如我所希望的那样显示，但并不能解决问题。我想保持一切不变，除了有两行，填充和字体大小相同。我去掉了外面的填充物和里面的填充物，但是不太好。。。由于元素的数量，您必须更改字体大小以使其适合并看起来合适..我认为这里没有问题-。是的，因为我删除了两个li元素以保持代码大小较小。这太愚蠢了，我会马上加上道歉，我应该注意到我自己。我会尝试修改一下，但是@Vincent G的字体大小可能是正确的。无论如何，在不改变字体大小的情况下，一定可以做到这一点……不，它不是。我尝试删除列表和行的每一个外部边距/填充，但仍保留在三行上。要做到这一点，您必须使用字体大小和链接填充。

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