添加引导程序后 CSS 视图更改答案

【问题标题】：CSS view changes after addition of bootstrap添加引导程序后 CSS 视图更改
【发布时间】：2021-04-27 01:39:31
【问题描述】：

我是网络开发的初学者。我正在制作一个简单的待办事项列表应用程序。我设计了一个网页，添加引导程序后会发生变化。

没有引导的代码

<!DOCTYPE html>

<html>
<head>
  <title>To Do List </title>
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'todo/styles.css' %}">
</head>
<body>

<div class="utils_box" id="heading">
<h1>{{kindOfDay}}!</h1>
</div>

<div class="utils_box">
{% for i in newListItems %}
  <div class="utils_item">
    <input type="checkbox" \>
    <p>{{ i }}</p>
    <a href="{% url 'todo:delete_item' i %}">X</a>
  </div>
{% endfor %}

<form class= "utils_item" action="" method="post">
{% csrf_token %}
<input type="text" name="newItem" placeholder="Add new item here">
<button type="submit" name="button">+</button>
</form>
</div>

</body>
</html>

Image of webpage without bootstrap

带引导程序的代码

<!DOCTYPE html>

<html>
<head>
  <title>To Do List </title>
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'todo/styles.css' %}">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  
</head>
<body>

<div class="utils_box" id="heading">
<h1>{{kindOfDay}}!</h1>
</div>

<div class="utils_box">
{% for i in newListItems %}
  <div class="utils_item">
    <input type="checkbox" \>
    <p>{{ i }}</p>
    <a href="{% url 'todo:delete_item' i %}">X</a>
  </div>
{% endfor %}

<form class= "utils_item" action="" method="post">
{% csrf_token %}
<input type="text" name="newItem" placeholder="Add new item here">
<button type="submit" name="button">+</button>
</form>
</div>

</body>
</html>

Image of webpage after adding bootstrap

Edit2：添加 CSS 代码以供参考。

CSS 代码

html {
  background-color: #E4E9FD;
  background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
  min-height: 1000px;
  font-family: 'helvetica neue';
}

h1 {
  color: #fff;
  padding: 10px;
}

.utils_box {
  max-width: 400px;
  margin: 50px auto;
  border-radius: 5px;
  background: white;
  box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

#heading {
  background-color: #A683E3;
  text-align: center;
}

.utils_item {
  min-height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F1F1F1;
}

.utils_item:last-child {
  border-bottom: 0;
}

input:checked+p {
  text-decoration: line-through;
  text-decoration-color: #A683E3;
}

input[type="checkbox"] {
  margin: 20px;
}

a {
  display: inline-block;
  text-align: right;
  width: 100%;
  text-decoration: none;
  margin: 20px;
  margin-right: 30px;
}

p {
  margin: 0;
  padding: 20px;
  font-size: 20px;
  font-weight: 200;
  color: #00204a;
}

form {
  text-align: center;
  margin-left: 20px;
}

button {
  min-height: 50px;
  width: 50px;
  border-radius: 50%;
  border-color: transparent;
  background-color: #A683E3;
  color: #fff;
  font-size: 30px;
  padding-bottom: 6px;
  border-width: 0;
}

input[type="text"] {
  text-align: center;
  height: 60px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 200;
  width: 313px;
}

input[type="text"]:focus {
  outline: none;
  box-shadow: inset 0 -3px 0 0 #A683E3;
}

::placeholder {
  color: grey;
  opacity: 1;
}

footer {
  color: white;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： html css django bootstrap-4

【解决方案1】：

默认情况下，Bootstrap 将背景颜色设置为白色。您可以使用覆盖它

body{
  background-color: transparent !important; 
}

【讨论】：

【解决方案2】：

您的某些类名可能与 Bootstrap 中的类名匹配，可能是 bootstrap 覆盖了您的样式。尝试使用多个单词来更改班级名称。例如：

<div class="utils_box" id="heading">
<h1>{{kindOfDay}}!</h1>
</div>

【讨论】：

您是否更改了 css 文件中的类名称？请分享你的css代码！
您可以使用您的浏览器，例如firefox 并检查元素：...右键单击...查看菜单点。您可以在那里看到任何具有相关 css 源的元素
非常感谢！