Question

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

但是，我想在响应状态下将图标显示在汉堡包的左侧。还希望使用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>

Answer 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

相关：Bootstrap 4 Navbar keep section on right even when toggled

Bootstrap 4 Nav出现问题-对齐图标

1 个答案: