2016-07-26 10 views
0

私はブートストラップで初めて作業しようとしています。しかし、私は解決する方法を理解できないという問題を発見しました。ブートストラップNavbarは正しく動作しません

黒いNavbarでは、「オフィス」が(通常通り)左に揃えられます。問題がどこにあるか。しかしなど右側のリストの右整列しない....

を私はすでにのdivの異なる、プル権利を試してみました、

は、誰かが見ることができますか?

/******************************************************************** GENERAL */ 
 
body {   background-color: #EFF3F4; 
 
       padding-top: 65px; 
 
       padding-bottom: 70px; 
 
       color: #6a6c6f; 
 
} 
 

 
a {    color: #6a6c6f; 
 
       text-decoration: none;} 
 

 
a:active {} 
 

 
a:hover {  color: #6a6c6f; 
 
       text-decoration: none;} 
 

 
a:link {} 
 

 
a:visited {} 
 

 

 

 

 
/********************************************************************* NAVBAR_oben */ 
 

 

 
.navbar-oben {   height: 50px; 
 
         padding: 0px; 
 
         margin-bottom: 0px; 
 
         position: fixed; 
 
         top: 0px; 
 
         right: 0px; 
 
         left: 0px; 
 
         background-color: #6a6c6f;      
 
         border: 0px; 
 
        
 
} 
 

 
    a.navi-oben {  color: #fff;} 
 
    
 
    a.navi-oben:hover { color: #6a6c6f;} 
 
    
 
    
 
/********************************************************************* NAVBAR_unten */ 
 

 

 
.nav-sidebar {   height: 50px; 
 
         padding-top: 0px; 
 
         padding-bottom: 0px; 
 
         padding-left: 60px; 
 
         padding-right: auto; 
 
         margin-bottom: 20px; 
 
         position: fixed; 
 
         top: 50px; 
 
         right: 0px; 
 
         left: 0px; 
 
         z-index: 1030;       
 
         background-color: #ff5b5b; 
 
         border: 0px; 
 
} 
 
    
 
    .navbar-nav>li>a.dropdown-toggle { height: 30px; 
 
             padding-top: 0px; 
 
             padding-bottom: 0px;} 
 
    
 
    
 
    
 
    a.navi-unten {      color: #fff;} 
 
    
 
    a.navi-unten:hover {    color: #6a6c6f; }
<body> 
 

 
     
 

 
      
 
     <!-- START: NAVBAR_oben --> 
 
      
 
     <nav class="navbar navbar-oben navbar-fixed-top"> 
 
       
 
      <div class="container"> 
 
       
 
       <div class="navbar-header"> 
 
         <a class="navbar-brand navi-oben" href="#"><?= $language['phrases']['site_title']; ?></a> 
 
       </div> 
 

 

 
       <ul class="nav navbar-nav navbar-right"> 
 
         <li><a class="navi-oben" href="#"><span class="glyphicon glyphicon-user"></span> </a></li> 
 
         <li><a class="navi-oben" href="#">Einstellungen</a></li> 
 
         <li><a class="navi-oben" href="#">Logbuch</a></li> 
 
          <li><a class="navi-oben" href="#">Logout</a></li> 
 
       </ul> 
 

 
      </div>   
 
     </nav> 
 
     
 
     
 
     <!-- END: NAVBAR_oben --> 
 
       
 
     <!-- START: NAVBAR_unten --> 
 
     
 
     > 
 
     <div class="row" > 
 
      
 
       
 
        <div class="col-md-12 sidebar" > 
 
        
 
       <ul class="nav navbar-nav nav-sidebar"> 
 
        
 
          <li class="dropdown"> 
 
            <a class="dropdown-toggle navi-unten" data-toggle="dropdown" href="#">xMailer Office 
 
            <span class="caret"></span></a> 
 

 
            <ul class="dropdown-menu"> 
 
              <li><a class="navi-unten" href="#">Advertiser</a></li> 
 
              <li><a class="navi-unten" href="#">Kampagnen</a></li> 
 
              <li><a class="navi-unten" href="#">Listen</a></li> 
 
          <li><a class="navi-unten" href="#">Jobs</a></li> 
 
          <li><a class="navi-unten" href="#">Nodes</a></li> 
 
            </ul> 
 
          </li> 
 
        
 
          <li class="dropdown"> 
 
            <a class="dropdown-toggle navi-unten" data-toggle="dropdown" href="#">Administration 
 
            <span class="caret"></span></a> 
 

 
            <ul class="dropdown-menu"> 
 
              <li><a class="navi-unten" href="#">Konfiguration</a></li> 
 
              <li><a class="navi-unten" href="#">Module</a></li> 
 
              <li><a class="navi-unten" href="#">Seiten</a></li> 
 
          <li><a class="navi-unten" href="#">Navigation</a></li> 
 
          <li><a class="navi-unten" href="#">Gruppen</a></li> 
 
          <li><a class="navi-unten" href="#">Benutzer</a></li> 
 
          <li><a class="navi-unten" href="#">Sprachen</a></li> 
 
            </ul> 
 
          </li> 
 
       </ul>  
 
      
 
      </div> 
 
     </div> 
 
     
 
     
 
     
 
     <!-- END: NAVBAR_unten --> 
 

 
     
 

 
     <!-- START: CONTENT --> 
 
     
 
     
 
     <div class="container"> 
 
      <div class="row"> 
 
       
 
       <div class="col-md-12"> 
 
        <div class="jumbotron"> 
 
         <?php create_element_content($language,$system); ?> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <!-- END: CONTENT --> 
 

 
    </body>

the problem

enter image description here

+0

既に正しく整列されていませんか? –

+0

私はリスト "EInstellungen - Logbuch - Logout"を右揃えにしたいので、左に対称に見えます。 コンテンツと同じ行で終了したい(より暗い正方形を見ることができます) – schnitzel

+0

私はあなたのコードをコピーしました。問題は見えません。スクリーンショットを見るhttp://www.tiikoni.com/tis/view/?id=76118a0 –

答えて

0

実際にnavbarで動作しない場合がありますdivがある場合がございます。私はわかりません。私はこのままでした。このようにコードを変更することができます。 #Nick Bullが正しいです。 navbar-rightを使用する必要があります。

<!-- START: NAVBAR_unten --> 



<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">xMailer Office<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a class="navi-unten" href="#">Advertiser</a></li> 
          <li><a class="navi-unten" href="#">Kampagnen</a></li> 
          <li><a class="navi-unten" href="#">Listen</a></li> 
          <li><a class="navi-unten" href="#">Jobs</a></li> 
          <li><a class="navi-unten" href="#">Nodes</a></li> 
     </ul> 
     </li> 


    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Administration<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a class="navi-unten" href="#">Advertiser</a></li> 
          <li><a class="navi-unten" href="#">Konfiguration</a></li> 
          <li><a class="navi-unten" href="#">Module</a></li> 
          <li><a class="navi-unten" href="#">Seiten</a></li> 
          <li><a class="navi-unten" href="#">Navigation</a></li> 
          <li><a class="navi-unten" href="#">Gruppen</a></li> 
          <li><a class="navi-unten" href="#">Benutzer</a></li> 
          <li><a class="navi-unten" href="#">Sprachen</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</nav> 





     <!-- END: NAVBAR_unten --> 
0

試してみてください。

.navbar-right .navi-oben { 
    float: right; 
} 

私はより多くの助けになることをしてみたいが、あなたのコードスニペットをしない実行しています正確にプロ私がテストするための非常にエレガントな結果を引き出す。

関連する問題