时间戳

首页 > 解决方案 > 填满引导导航栏的整个宽度

html - 填满引导导航栏的整个宽度

问题描述

所以我会直截了当，我正在使用 Bootstrap 4 试图用我的导航栏填充整个（减去边距）。我知道以前有人问过这个问题，我首先在这里查看了一篇文章并尝试使用.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>

标签： htmlcssbootstrap-4

解决方案

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;
}

mdbootstrap 示例

推荐阅读