【问题标题】:bootstrap css isn't rendering properly inside bodybootstrap css 没有在 body 内正确渲染
【发布时间】:2021-04-02 22:21:14
【问题描述】:

由于某种原因,我的引导 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>

【问题讨论】:

  • 我正在尝试使用 Rider 在 asp.net mvc 模板中包含的引导 css 文件。所以如果可能的话我不想使用cdn。

标签: css asp.net-mvc bootstrap-4


【解决方案1】:

我在 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">

【讨论】:

    猜你喜欢
    • 2020-05-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-08
    • 1970-01-01
    • 1970-01-01
    • 2021-07-22
    • 2018-05-10
    • 2013-03-03
    相关资源
    最近更新 更多