带有右对齐项目的引导导航栏答案

【问题标题】：Bootstrap NavBar with right aligned items带有右对齐项目的引导导航栏
【发布时间】：2020-05-13 01:48:44
【问题描述】：

我正在尝试在 bootstrap 4.3.1 中将导航栏与右侧对齐。我想在右边有 navbar-brand，在左边有 navbar-item 但是我尝试的一切似乎都不起作用。

this is现在的样子我想成为like this

这是我的代码：

	<nav class="navbar navbar-expand-lg navbar-dark">
		<div class="container">
			<a class="navbar-brand" href="index.php">
				<img src="image/logo.svg" width="30" height="30" class="d-inline-block align-top" style="filter: invert(1)" alt="">
				my new website
			</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbar">
				<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
					<?php $uri = $_SERVER['REQUEST_URI']; ?>
					<li class="nav-item <?= $uri == '/test.php' ? 'active' : '' ?>">
						<a class="nav-link" href="test.php">test</a>
					</li>
					<li class="nav-item <?= $uri == '/test.php' ? 'active' : '' ?>">
						<a class="nav-link" href="tset.php">test</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">other</a>
						<div class="dropdown-menu">
							<a class="dropdown-item <?= $uri == '/test.php' ? 'active' : '' ?>" href="test.php">test</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item <?= $uri == '/test.php' ? 'active' : '' ?>" href="stat.php">test</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav my-2 my-lg-0" style="flex-direction: row;">
					<li class="nav-item">
						<a class="nav-link" style="padding-right: .5rem;padding-left: .5rem;" href="https://facebook.com" target="_blank">
							<img src="images/facebook.svg" width="24" height="24" class="d-inline-block align-top" style="filter: invert(1)" alt="">
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" style="padding-right: .5rem;padding-left: .5rem;" href="https://github.com" target="_blank">
							<img src="images/github.svg" width="24" height="24" class="d-inline-block align-top" style="filter: invert(1)" alt="">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

【问题讨论】：

标签： html css bootstrap-4 navbar

【解决方案1】：

尝试将d-flex flex-row-reverse 添加到导航类。之后，如果有问题，您应该尝试更改顺序（我认为图像的顺序不正确）。另外，我认为您应该将.container div 放在导航之外，甚至是整个页面。 Here's the bootstrap 4.4 doc about flex

【讨论】：

【解决方案2】：

只需为各个元素添加样式 float:left 和 float:right。

【讨论】：