html - Bootstrap Navbar 右对齐不起作用

标签 html css twitter-bootstrap navbar

我是第一次尝试使用 Bootstrap 。但是我发现了一个问题,我不知道如何解决。

在黑色导航栏上,“办公室”左对齐(像往常一样)。但是右边的列表没有对齐....

我已经尝试过向右拉、不同的 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

最佳答案

实际上 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 -->

关于html - Bootstrap Navbar 右对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38585901/

相关文章:

html - 如何从WebView生成的归档文件中提取html?

javascript - 如何设置textShadow属性

html - 从父选择器获取属性是使用内容 :attr(); 的 CSS

javascript - 如何更改按钮内的文本?

jquery - HTML5 音频播放器 : Pause not working

javascript - html 表格和 javascript

html - 如何创建一个子 div 来填充固定高度的父 div 中剩余的垂直空间?

javascript - 如何在不调用任何 CSS 的情况下从内容中隐藏特定文本?

jquery - Bootstrap 提前输入 : show different text in box once selected

css - Bootstrap 折叠菜单在展开时不会向下推内容