我正在尝试将我的导航栏项目在引导程序中向右对齐。
我想让所有东西都对齐,除了品牌标志。
<div class="logo">
<h1><a href="#"><img src="#" alt="" /></a></h1>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="drop-down"><a href="#services"><span>Services</span></a>
<ul>
<li class="drop-down"><a href="#"><span>Test1</span></a>
<ul>
<li><a href="#">Test11</a></li>
<li><a href="#">Test12</a></li>
</ul>
</li>
<li class="drop-down"><a href="#"><span>Stats</span></a>
<ul>
<li><a href="#">Stats1</a></li>
<li><a href="#">Stats2</a></li>
</ul>
</li>
</ul>
</li>
<li class="drop-down"><a href="">Support</a>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
答案 0 :(得分:0)
看看这个
<style>
.logo { float: left; }
.nav-menu { float: right; }
.drop-down { float: left; }
</style>
答案 1 :(得分:0)
以下是使用 Bootstrap 5 的示例:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
注意标签。它有一个类“ms-auto”。这将使所有链接向右对齐。使用“me-auto”会将所有元素向左对齐。
答案 2 :(得分:0)
您可以简单地使用 margin-left: auto
来实现右对齐。 Boostrap 4 有一个具有这种风格的默认 ml-auto
类。
假设您现有的示例正在运行,请尝试:
<div class="logo">
<h1><a href="#"><img src="#" alt="" /></a></h1>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul class="ml-auto">
<li class="drop-down"><a href="#services"><span>Services</span></a>
<ul>
<li class="drop-down"><a href="#"><span>Test1</span></a>
<ul>
<li><a href="#">Test11</a></li>
<li><a href="#">Test12</a></li>
</ul>
</li>
<li class="drop-down"><a href="#"><span>Stats</span></a>
<ul>
<li><a href="#">Stats1</a></li>
<li><a href="#">Stats2</a></li>
</ul>
</li>
</ul>
</li>
<li class="drop-down"><a href="">Support</a>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
在 Bootstrap 5 中,您只需将 ml-auto
替换为 ms-auto
。