Bootstrap Navbar对齐权不工作

我正在尝试第一次使用bootstrap。但是我发现了一个问题，我无法弄清楚如何解决。Bootstrap 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

来源

2016-07-26 schnitzel

这是不是已经对齐了？ –

我喜欢将“EInstellungen - Logbuch - Logout”列表右对齐，因此它看起来左对称。我希望它在内容的同一行上结束（您可以在那里看到一个较暗的方块） – schnitzel

我刚刚复制了您的代码，但看不到任何问题，它看起来不错。观看屏幕截图http://www.tiikoni.com/tis/view/?id=76118a0 –

其实navbar在div可能不起作用。我不确定。我在这个卡住了。你可以像这样修改你的代码。＃尼克牛是对的。你必须使用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 -->

来源

2016-07-26 09:57:24

尝试：

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

我很想有更多的帮助，但运行您的代码段不完全亲为我测试一个非常优雅的结果。

来源

2016-07-26 09:42:05

Bootstrap Navbar对齐权不工作

回答

相关问题