bootstrap css 无法在 body 内正确渲染

问题描述

出于某种原因，我的引导 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 中复制了您的问题，发现您的 head 部分缺少 cdn 链接，请添加以下内容：

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

asp.net-mvc bootstrap-4