我是第一次尝试使用 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>
最佳答案
实际上 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/