在一條線上對齊Bootstrap navBar

我做了一個帶Bootstrap的導航欄，它在不同的分辨率上看起來不同。如果屏幕變小，它看起來像這樣：在一條線上對齊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; 
}

我明白任何形式的幫助。親切的問候:)

來源

2016-04-12 JRsz

我在這裏看到的任何問題 - https://jsfiddle.net/1q7jtotz/。 – Tricky12

是的，因爲我刪除了兩個li元素以減小代碼大小。這很愚蠢，我會立即添加它們 – JRsz

道歉，我應該注意到我自己。我會盡量修補一下，但@Vincent G對於字體大小可能是正確的。 – Tricky12

減少font-size和padding，並應符合like this

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

來源

2016-04-12 19:07:09

這是顯示，因爲我想它但不能解決問題。我想保留所有內容，除非它有兩行，即填充和字體大小相同。 – JRsz

https://jsfiddle.net/pkk7vr2h/4/我刪除了外部填充和內部填充，但它不太好...您**必須**更改字體大小以使其適合並正確顯示，因爲數字的元素.. –

在一條線上對齊Bootstrap navBar

回答

相關問題