我正在尝试将样式应用于我的模板
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{% static '/css/main.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Email Scrapper</title>
</head>
<body>
<div class="container">
<br/>
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm" action="{% url 'scrap' %}" method="GET">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<!--end of col-->
<div class="col">
<input type="text" class="form-control form-control-lg form-control-borderless" placeholder="Search topics or keywords" name="q" id="InputSearch" value="{{ q.get }}"
aria-describedby="searchHelp">
</div>
<!--end of col-->
<div class="col-auto">
<button class="btn btn-lg btn-success" type="search>Search</button>
</div>
<!--end of col-->
</div>
</form>
</div>
<!--end of col-->
</div>
</div>
</body>
</html>
css：
body{
background:#ddd;
}
.form-control-borderless {
border: none;
}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}
问题是，当我运行它时，会出现以下内容：
输出的图像
什么时候应该更像这样：
这应该是输出
在它工作之前，但当我应用自己的一些代码时，它突然停止了工作。这段代码在Django和python中运行。
1：如果使用引导，请确保添加引导链接
2：你忘记在type="后面加双引号了；搜索
background:#ddd;
}
.form-control-borderless {
border: none;
}
.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
border: none;
outline: none;
box-shadow: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{% static '/css/main.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Make sure to add bootstrap link if you are using bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Email Scrapper</title>
</head>
<body>
<div class="container">
<br/>
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<form class="card card-sm" action="{% url 'scrap' %}" method="GET">
<div class="card-body row no-gutters align-items-center">
<div class="col-auto">
<i class="fas fa-search h4 text-body"></i>
</div>
<div class="col">
<input type="text" class="form-control form-control-lg form-control-borderless" placeholder="Search topics or keywords" name="q" id="InputSearch" value="{{ q.get }}"
aria-describedby="searchHelp">
</div>
<div class="col-auto">
<button class="btn btn-lg btn-success" type="search">Search</button>
<!-- Here you forgot to put double quotes (") after type="search -->
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>