Bootstrap 4 Nav 的问题 - 对齐图标答案

【问题标题】：Trouble with Bootstrap 4 Nav - Aligning IconsBootstrap 4 Nav 的问题 - 对齐图标
【发布时间】：2018-06-21 22:47:49
【问题描述】：

我无法让搜索和购物车“图标”在移动设备上对齐。图标应该位于桌面菜单的右侧。

但是，我想在响应状态下将图标放在汉堡包的左侧。还想使用已经随 BS4 提供的 CSS 实用程序。

有什么想法吗？提前致谢。

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Homepage</title>


		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> 
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	</head>
	<body>

		<div class="container text-uppercase">
			<nav class="navbar navbar-expand-lg navbar-light">
				<a class="navbar-brand my-4" href="#"><img src="https://placehold.it/200x100"></a>
				<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
					<ul class="navbar-nav">
						<li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
						<li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
						<li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
						<li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
						<li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
					</ul>
				</div>
				<div class="d-flex justify-content-end">
					<i class="fas fa-fw fa-search"></i>
					<i class="fas fa-fw fa-shopping-cart"></i>
				</div>
			</nav>
		</div>



		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	</body>
</html>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

Bootstrap 4 的导航栏是 flexbox，所以你可以根据需要使用ordering classes 进行调整...

<div class="container text-uppercase">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand my-4" href="#"><img src="https://placehold.it/200x100"></a>
        <button class="navbar-toggler navbar-toggler-right order-lg-0 order-1" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-flex justify-content-end order-lg-2 order-0">
            <i class="fas fa-fw fa-search"></i>
            <i class="fas fa-fw fa-shopping-cart"></i>
        </div>
        <div class="collapse navbar-collapse justify-content-end order-lg-1 order-last" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
            </ul>
        </div>
    </nav>
</div>

https://www.codeply.com/go/97ZXyZY5E2

【讨论】：

谢谢，我已经试过了。不幸的是，汉堡包并没有保持在顶部......当你点击它时它会飘下来。
不错！无论如何，您可以让图标排列在汉堡包旁边而不是在中间？
我认为您的问题已经得到解答......您需要再玩一些才能完全按照您的意愿获得它。一般可以使用ml-auto向右推送项目：stackoverflow.com/questions/41513463/…