【发布时间】：2021-08-18 07:54:49
【问题描述】：
我对 HTML/CSS/Bootstrap 还很陌生，但我真的很想将它用于一个长期学习项目，最终将 JS 包含在一个闲置游戏中。
我遇到的问题是我希望将内容定位在我的导航栏旁边欢迎回来，我尝试了很多我能想到的方法，但每次都失败了。
我现在拥有的是
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Idle RPG</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="shortcut icon" href="assets/images/favicon.ico">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Side Nav-->
<div class="side-nav">
<div class="text-left pl-4 py-4 primary-text text-uppercase">
<h2>Forbidden Age</h2>
</div>
<div class="text-left pl-4 third-text">
<h5>Character</h5>
</div>
<div class="list-group list-group-flush pl-2 text-left">
<a href="#" class="list-group-item list-group-item-action
bg-transparent second-text">
Armoury
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Stats
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Adventure
</a>
<div class="text-left pl-3 mt-2 third-text">
<h5>Leveling</h5>
</div>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Quests
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Dungeons
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Conquer
</a>
<div class="text-left pl-3 mt-2 third-text">
<h5>Crafting</h5>
</div>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Blacksmith
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Jewelcrafting
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Enchanting
</a>
<div class="text-left pl-3 mt-2 third-text">
<h5>Guild</h5>
</div>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Raiding
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Forum
</a>
<a href="" class="list-group-item list-group-item-action
bg-transparent second-text">
Bank
</a>
</div>
</div>
<!-- Side Nav End-->
<!-- Player Dropdown Start-->
<div class="content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent
py-4 px-4">
<div class="d-flex align-items-center">
<i class="fas fa-2x fa-align-left primary-text mr-3 id=" menu-toggle "></i>
<h3 class="m-0 ">Welcome Back</h3>
<button class="navbar-toggler " type="button "
data-bs-toggle="collapse "
data-bs-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 ms-auto pl-3 mb-lg-0 ">
<li class="nav-item-dropdown ">
<a href="# " class="nav-link dropdown-toggle second-text fw-bold " id="navbarDropdown "
role="button " data-bs-toggle="dropdown "
aria-expanded="false ">
<i class="fas fa-user me-2 "></i>Yami
</a>
<ul class="dropdown-menu "
aria-labelledby="navbarDropdown ">
<li>
<a href="# " class="dropdown-item ">Profile</a>
<a href="# " class="dropdown-item ">Profile</a>
<a href="# " class="dropdown-item ">Profile</a>
<a href="# " class="dropdown-item ">Profile</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Player Dropdown End -->
<!-- Main Content Start -->
<div class="container">
<div class="row">
<div class="col ">
<p>test</p>
</div>
</div>
</div>
<!-- Main Content End -->
<script src="assets/js/jquery.min.js "></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js "
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
crossorigin="anonymous "></script>
<script src="assets/js/bootstrap.min.js "></script>
<script src="assets/js/main.js "></script>
</body>
</html>这可能是一些基本的东西，如果是的话，我很抱歉浪费了任何人的时间。
【问题讨论】：
-
<link href="assets/css/bootstrap.min.css" rel="stylesheet">不起作用，我用bootstrap cdn而不是href地址测试你的代码，它工作正常 -
我尝试切换 CDN，但这并没有解决我将内容定位在我想要的位置的问题。 @jiali（引导程序工作正常）