填满引导导航栏的整个宽度答案

【问题标题】：Filling up the entire width of bootstrap navbar填满引导导航栏的整个宽度
【发布时间】：2020-09-29 06:16:57
【问题描述】：

所以我会直截了当地说，我正在使用 Bootstrap 4 尝试用我的导航栏填充整个内容（减去边距）。我知道之前有人问过这个问题，我首先查看了一个帖子 here 并尝试使用 .nav-fill 类来完成此操作，但没有成功。

我想让我的导航栏居中，并在两侧用边距填充整个内容。这是我目前拥有的代码，我似乎无法弄清楚。

* {
	box-sizing: border-box;
}

body {
	background-color: #393939
}



/*

-=-=- NAVIGATION BAR -=-=-

*/
#header-nav {
	background-color: #262626;
	font-family: 'Kanit', sans-serif;
	font-size: 1.1em;
	text-transform: uppercase;
}

/*
#header-nav .container {
	max-width: max-content;
}
*/

.navlink {
	display: inline-block;
	color: #C9C9C9;
	padding: 10px;
	padding-bottom: 10px;
	background:
		linear-gradient(white, white)
		bottom
		/100% 0px
		no-repeat;
	transition: 0.2s all;
}

.navlink:hover {
	color: #FFF;
	text-decoration: none;
	background-size: 100% 4px;
}

.active {
	color: #FFF;
}



/*

-=-=- SOCIAL MEDIA -=-=-

*/

.social-icon {
	float: right;
	font-size: 1.5em;
	padding: 0;
}

<!DOCTYPE html>
<html>

	<head>

		<!-- Meta & Other -->
		<title>Infamous | Home</title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="Infamous official website">
		<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
		<meta name="author" content="MrWardy">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		<link rel="stylesheet" href="./Stylesheets/default.css">
		
		<!-- Fonts -->
		<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
		<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
	
	

	</head>



	<body>

		<header>
			<nav id="header-nav" class="navbar-nav">
				<div class="container d-flex justify-content-center">
					<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
					<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
					<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
					<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--					<a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
				</div>
			</nav>
		</header>

		<!-- JavsScript -->
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

	</body>

</html>

【问题讨论】：

我无法想象您尝试创建的图像。你能举个例子吗？
当然@CanUver 我找不到一个例子，但这是一个非常粗略的颜色编码的绘图，这是我艺术能力的程度imgur link。如果你运行代码 sn-p 并将鼠标悬停在任何一个链接上，你会看到一个白条出现，这是每个链接的空间，我希望它延伸到整个事物，他们没有现在。不是整个屏幕，只是链接所在的位置，两侧有边距。
使用css grid-container怎么样？

标签： html css bootstrap-4

【解决方案1】：

CSS 网格容器：

<div class="container grid-container">
      <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
      <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
      <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
      <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-container > a {
  text-align: center;
}

mdboootstrap example

【讨论】：