Django未正确显示的引导程序4

2024-04-26 00:48:14 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在尝试设置Django来使用Bootstrap。我好像不能让它正常工作,我也不知道我做错了什么。首先,我只是显示一个面板。It should look like this example from W3Schools。在

相反,它看起来像这样:enter image description here

我生成的HTML如下所示:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <h2>Basic Panel</h2>
        <div class="panel panel-default">
            <div class="panel-body">A Basic Panel</div>
        </div>
    </div>
</body>
</html>

似乎有些样式正在被应用,因为如果我删除样式表<link>,它似乎会更改样式。在引导站点上,它提到不完整的样式可能是由于DOCTYPE声明造成的,但据我所知,我得到了正确的答案。在

我想我犯了一些相对明显的错误。在


Tags: httpsdivsrccomhtmljsscriptbody
2条回答

问题出在你们班上。现在引导改变了一些类。更多信息请看这个https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells

因此,我还研究了您的代码和w3schools示例。好像是这样

^{1}$

打得不好。你不想用的原因是什么

^{pr2}$

因为当我替换CSS链接时,它在你的代码中运行得很好。希望对你有帮助。在

这是您的代码:

<!DOCTYPE html>

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<! <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h2>Basic Panel</h2>
    <div class="panel panel-default">
        <div class="panel-body">A Basic Panel</div>
    </div>
</div>
</body>
</html>

相关问题 更多 >