Вопрос по css, bootstrap-4 – stackoverflow.com/questions/41513463/...

-1

я проблемы с настройкой поиска и корзины покупок в "значках" для мобильных устройств. Иконки должны быть справа от меню на рабочем столе, как они есть.

Тем не менее, я хотел бы получить значки с левой стороны гамбургера на адаптивных состояниях. Также хотел бы использовать утилиты CSS, уже поставляемые с BS4.

Есть идеи? Заранее спасибо.

<!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>

Ваш Ответ

1   ответ
1

поэтому вы можете использоватьклассы заказа настроить по мере необходимости ...

<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 держать раздел справа даже при переключении

Спасибо, я уже пробовал это. К сожалению, гамбургер не остается на вершине, тогда ... он всплывает, когда вы нажимаете на него. Dario Zadro
Приятно! В любом случае, вы можете расположить иконки рядом с гамбургером, а не в середине? Dario Zadro
Я думаю, что на ваш вопрос ответили ... вам нужно поиграть с ним еще немного, чтобы получить именно так, как вы хотите. В общем,ml-auto можно использовать для перемещения элементов вправо:stackoverflow.com/questions/41513463/... Zim

Похожие вопросы