html - 尝试将导航栏链接居中引导 4
问题描述
我试图将我的链接放在 h1 下方,但没有任何效果。这就是我现在所拥有的,我希望得到任何帮助或指点!这是我的 h1 标签
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案
如果您尝试将.nav-item
链接水平居中,则将引导类添加justify-content-center
到带有类的ul
标签中navbar-nav
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
例子
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid p-5 bg-success header-body text-center">
<h1 id="high-credit-top-text">
<a class="text-white" style="font-family: 'Lexend Deca', sans-serif;" href="hogkostnadskredit.php">Playaround.se</a>
</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container justify-content-center">
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link text-white" href="playaround.php"><i class="fas fa-home"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="nyheter.php">Nyheter</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="information.php">Infomartion</a>
</li>
</ul>
</div>
</div>
</nav>
推荐阅读
- c# - 应该添加到列表开头的简单 C# 节点列表函数不能用作外部静态 Void
- keras - 在定义新的损失函数时为 keras 中的张量赋值
- python - python中的随机mac地址生成器
- php - 注销后用户未重定向回上次访问的页面
- python - 如何从命令行列出应用的迁移?
- c# - 字符串包含非字母数字字符(如中文或日文)时的对齐问题
- javascript - 正文元素和渲染顺序中的 onload 事件
- pandas - 获得较少相关的变量名称
- apache-spark - 如何使用 Spark SQL SPLIT 函数将输入传递给 Spark SQL IN 参数
- visual-studio-code - 修改 vscode `workspaceStorage` 文件夹路径