在 Bootstrap 4 中向卡片添加自定义 CSS

Question

我在 StackOverflow 上经历了几个问题和解决方案，但它似乎对我不起作用。 虽然，p-5 可以很好地填充，但这适用于所有设备。我想要用于移动设备的特定 CSS 进行填充。我尝试添加自定义 CSS 并在卡片 div 中添加自定义类 infocards，但它不起作用。另外，我添加了!important 以使用我的自定义样式覆盖引导程序上的任何等重样式。

注意：我正在使用 Django 构建我的页面，并且文件是静态的。它们已在settings.py 中正确配置。

我的index.html：

<link rel="stylesheet" href="{% static '/custom.css' %}">
<div class="col-md-6">
  <div class="contacts card p-5 infocards">
    <h3 class="mb-4">Contact Info</h3>
    <div class="row mb-4">
      <div class="col-1">
        <i class="fa fa-user"></i>
      </div>
      <div class="col-9">
        <span>Naman Chauhan</span>
      </div>
    </div>
  </div>
</div>

这里是custom.css：

/*for mobile*/
.infocards  {
  padding: 10px !important;
}

/*for desktop*/
@media only screen and (min-width: 768px)  {
}

Answer 1

只需从 css 链接标签中删除 / 并确保您在模板中包含上述内容 {% load static %}

<link rel="stylesheet" href="{% static 'custom.css' %}" />