引导 CSS 在正文中无法正确呈现



由于某些原因,我的引导css无法正确呈现页面正文中的内容。段落标记正在图像标记内部呈现。段落标记和图像标记都在正文中。

@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paul Drake's Website</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-3">
<a href="files/Resume 2020.pdf">Resume</a>
</div>
<div class="col-6 text-center">
<h1>Paul Drake's Website</h1>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">My Projects</button>
<div class="dropdown-menu col-3" aria-labelledby="dropDownMenuButton">
<a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies">Streaming Movie App</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<IMG src="files/_DSC0630-Costco3.jpg">
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida cum sociis natoque penatibus. Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Diam sit amet nisl suscipit adipiscing bibendum. Diam sollicitudin tempor id eu nisl. Lacus vel facilisis volutpat est velit egestas. Purus gravida quis blandit turpis cursus in hac habitasse platea. Non enim praesent elementum facilisis leo vel. Nunc scelerisque viverra mauris in aliquam sem fringilla ut. Tristique sollicitudin nibh sit amet commodo. Porta nibh venenatis cras sed felis eget. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Enim eu turpis egestas pretium aenean pharetra magna ac. Ac auctor augue mauris augue neque gravida in fermentum et. Turpis egestas maecenas pharetra convallis posuere morbi leo urna molestie. Tristique sollicitudin nibh sit amet. Laoreet sit amet cursus sit amet dictum sit. Sit amet tellus cras adipiscing enim. Ut eu sem integer vitae justo eget magna.</p>
</div>
</div>
</div>
</main>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

我在codepen.io中复制了您的问题,发现您的头部缺少一个cdn链接,请添加以下内容:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

最新更新