Bootstrap Navbar对齐右边不起作用

时间：2016-07-26 09:22:54

标签： html css twitter-bootstrap navbar

我第一次尝试使用bootstrap。但我发现了一个问题，我无法弄清楚如何解决。

在黑色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

2 个答案:

答案 0 :(得分：0)

尝试：

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

我希望能够提供更多帮助，但运行代码片段并不会为我提供非常优雅的测试结果。

答案 1 :(得分：0)

实际上navbar div可能无法工作navbar-right。我不确定。我陷入了困境。您可以像这样修改代码。 #Nick Bull是对的。您必须使用<!-- 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 --> 。

{{1}}
相关问题
最新问题