ブートストラップのnavBarを1行に整列する

異なる解像度で違って見えるブートストラップを使ってnavBarを作った。画面が小さくなる場合には、次のようになります。ブートストラップのnavBarを1行に整列する

写真1：

写真2：

写真3：1と2は問題あり

Pciture、これは私はそれが欲しい方法。しかし、写真3ではすべてが2つの線に収まるが、3つの線に分割される。 私はすべてを2行にする必要があります。私は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; 
}

：

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これは私のコードです。種類がfont-sizeとpaddingを削減:)

出典

2016-04-12 JRsz

にフィットしなければならない私はここに何の問題が見られない - https://jsfiddle.net/1q7jtotz/を。 – Tricky12

はい、コードサイズを小さく保つために2つのli要素を削除したためです。それはかなり愚かだった、私はすぐにそれらを追加します – JRsz

謝罪、私は自分自身に気づいていたはずです。私はちょっと試してみるつもりだが、@ Vincent Gはフォントサイズについて正しいかもしれない。 – Tricky12

に関しては、それがlike this

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

出典

2016-04-12 19:07:09

私はそれが欲しいと表示されますが、問題を解決しません。私はすべてを2行にすること、パディングとフォントサイズを同じにすることを除いて、すべてをそのままにしたい。 – JRsz

https://jsfiddle.net/pkk7vr2h/4/外側の詰め物と内側の詰め物を削除しましたが、あまり良くありません。**あなたは**サイズに合わせてフォントサイズを変更する必要があります。要素の.. –

ブートストラップのnavBarを1行に整列する

答えて

関連する問題