@Bill_Kim_91

Почему не срабатывают свойства justify-content?

Здравствуйте.
Почему не срабатывают свойства параметра justify-content?
К примеру flex-end отрабатывает корректно и прибивает меню к концу элемента, а вот space-between, space-around, space-evenly работает не так как должно быть.
К примеру: space-between прибивает меню к началу блока, а не растягивает его по всей длине.

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Main page</title>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<body>
		<!-- navbar -->  
 		<nav class="navbar navbar-expand-lg fixed-top ">  
 			<a class="navbar-brand" href="#">Home</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
 				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse " id="navbarSupportedContent">
				<ul class="navbar-nav mr-4">
 					<li class="nav-item">
     					<a class="nav-link" data-value="about" href="#">About</a>
     				</li>  
					<li class="nav-item">
    					<a class="nav-link " data-value="portfolio"href="#">Portfolio</a>    
 					</li>
					<li class="nav-item"> 
					    <a class="nav-link " data-value="blog" href="#">Blog</a>
					</li>   
					<li class="nav-item">  
   						<a class="nav-link " data-value="team" href="#">Team</a>
   					</li>  
					<li class="nav-item"> 
						<a class="nav-link " data-value="contact" href="#">Contact</a>
					</li> 
				</ul> 
			</div>
		</nav>
		
		<!-- Optional js -->
		<script type="text/javascript" href="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" href="js/bootstrap.min.js"></script>
	</body>
</html>


/*Navbar style */

.navbar	{ 
	background:#F97300;
}

.nav-link , .navbar-brand	{ 
	color: #f4f4f4; cursor: pointer;
}

.nav-link	{
	margin-right: 1em;
}

.nav-link:hover {
	background: #f4f4f4; color: #f97300;
}

.navbar-collapse {
	justify-content: space-between;
}

.navbar-toggler {
	background:#fff;
}
  • Вопрос задан
  • 3171 просмотр
Решения вопроса 1
ReaverJS
@ReaverJS
Так у вас внутри блока .navbar-collapse - другой блок ul.navbar-nav. У него и задавайте flex.
.navbar-nav {
    width: 100%;
    justify-content: space-evenly;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IceRD
@IceRD
заполнение идет по ширине контейнера.
т.к. контейнер по ширине контента, ничего и не происходит.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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