Html 如何在引导中正确地勾勒出卡片的轮廓？_Html_Css_Bootstrap 4_Outlining

Html 如何在引导中正确地勾勒出卡片的轮廓？

html css bootstrap-4

Html 如何在引导中正确地勾勒出卡片的轮廓？,html,css,bootstrap-4,outlining,Html,Css,Bootstrap 4,Outlining,我在一个Django网站上工作，所以我可以学习更多关于编码、CSS、Html和Boostrap的知识。我的主页有问题。在附带的屏幕截图中，您可以看到我的卡片上的大纲与页面顶部的彩色框不匹配。我画了两条粉红色的线来说明我的意思。有人知道我怎么解决这个问题吗 Dashboard.html {% extends 'accounts/main.html' %} {% block content %} {% include 'accounts/status.html' %} <br>

我在一个Django网站上工作，所以我可以学习更多关于编码、CSS、Html和Boostrap的知识。我的主页有问题。在附带的屏幕截图中，您可以看到我的卡片上的大纲与页面顶部的彩色框不匹配。我画了两条粉红色的线来说明我的意思。有人知道我怎么解决这个问题吗

Dashboard.html

{%  extends 'accounts/main.html' %}

{% block content %}

{%  include 'accounts/status.html' %}

<br>
<div class="row">
    <div class="col-md-5">
        <h5>KLANTEN</h5>
        <hr>
        <div class="card card-body">
            <a class="btn btn-primary  btn-sm btn-block" href="{% url 'create_customer' %}">
            Nieuwe klant aanmaken</a>
            <table class="table table-sm">
                <tr>
                    <th></th>
                    <th>Customer</th>
                    <th>Phone</th>
                </tr>

            </table>
        </div>
    </div>

    <div class="col-md-7">
        <h5>LAASTE 5 RESERVERINGEN</h5>
        <hr>
        <div class="card card-body">
            <table class="table table-sm">
                <tr>
                    <th>Eigenaar</th>
                    <th>Diernaam</th>
                    <th>Brengen</th>
                    <th>Halen</th>
                    <th>Wijzigen</th>
                    <th>Verwijderen</th>
                </tr>

                {% for i in visits %}
                    <tr>
                        <td>{{i.customer}}</td>
                        <td>{{i.animals.name}}</td>
                        <td>{{i.date_brought}}</td>
                        <td>{{i.date_leave}}</td>
                        <td><a href="#" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-trash"></span>  </a></td>
                        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

</div>

{% endblock %}

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>CRM</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

</head>
<body>

    {% include 'accounts/navbar.html' %}
    <div class="container-fluid">
    {% block content %}




    {% endblock %}

    <hr>
    <h5>©Luuk Smedts     Pre-alpha built 0.3</h5>


</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>

<br>

<div class="row">
    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="total-orders" >
                <div class="header">
                    <h5 class="card-title">Vandaag brengen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_brengen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-delivered">
                <div class="header">
                    <h5 class="card-title">Vandaag halen</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="col-md">
            <div class="shadow p-3 mb-3 text-white rounded" id="orders-pending">
                <div class="header">
                    <h5 class="card-title">Huidige gasten</h5>
                </div>
                <div class="body">
                    <h3 class="card-title">{{vandaag_halen}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

提前谢谢你的帮助

#徽标{
}
身体{
背景色：#fcfc；
}
#订单总数{
背景色：#4cb4c7；
}
#交付的订单{
背景色：#7abecc；
}
#待决订单{
背景色：#7CD1C0；
}
@字体{
字体系列：“字形图标半身人”；
src:url（'../font/glyphicons-halflings-regular.eot'）；
src:url（'../font/glyphions-halflings-regular.eot？#iefix'）格式（'embedded-opentype'）、url（'../font/glyphions-halflings-regular.woff'）、url（'../font/glyphions-halflings-regular.ttf'）格式（'truetype'）、url（'../font/glyphions-halflings-regular.svg#glyphions-halflings-regular'）格式（'svg'）；
}
.col-md-5{
左侧填充：30px！重要；
}
.col-md-7{
右边填充：30px！重要；
}


客户关系管理
{%include'帐户/navbar.html%}
{%block content%}
{%endblock%}

©Luuk Smedts预阿尔法制造0.3
status.html


范达格·布伦根
{{vandaag_brengen}}
范达格·海伦
{{vandaag_halen}}
惠迪格加斯滕酒店
{{vandaag_halen}}
{%extends'帐户/main.html%}
{%block content%}
{%include'帐户/status.html%}


克拉滕

顾客
电话
LAASTE 5 RESERVERINGEN

伊格纳尔
迪尔纳姆
布伦根
海伦
维吉根
维尔维德伦
{%i在访问量%}
{{i.customer}}
{{i.animals.name}
{{i.date{}
{{i.离开日期}
{%endfor%}
{%endblock%}
main.html
{%load static%}

#徽标{
}
身体{
背景色：#fcfc；
}
#订单总数{
背景色：#4cb4c7；
}
#交付的订单{
背景色：#7abecc；
}
#待决订单{
背景色：#7CD1C0；
}
@字体{
字体系列：“字形图标半身人”；
src:url（'../font/glyphicons-halflings-regular.eot'）；
src:url（'../font/glyphions-halflings-regular.eot？#iefix'）格式（'embedded-opentype'）、url（'../font/glyphions-halflings-regular.woff'）、url（'../font/glyphions-halflings-regular.ttf'）格式（'truetype'）、url（'../font/glyphions-halflings-regular.svg#glyphions-halflings-regular'）格式（'svg'）；
}
.col-md-5{
左侧填充：30px！重要；
}
.col-md-7{
右边填充：30px！重要；
}


客户关系管理
{%include'帐户/navbar.html%}
{%block content%}
{%endblock%}

©Luuk Smedts预阿尔法制造0.3
status.html


范达格·布伦根
{{vandaag_brengen}}
范达格·海伦
{{vandaag_halen}}
惠迪格加斯滕酒店
{{vandaag_halen}}
{%extends'帐户/main.html%}
{%block content%}
{%include'帐户/status.html%}


克拉滕

顾客
电话
LAASTE 5 RESERVERINGEN

伊格纳尔
迪尔纳姆
布伦根
海伦
维吉根
维尔维德伦
{%i在访问量%}
{{i.customer}}
{{i.animals.name}
{{i.date{}
{{i.离开日期}
{%endfor%}
{%endblock%}
main.html
{%load static%}

您需要将它们沿边缘拉伸吗？@sergeykuznetsov我想要的是顶部的彩色框和底部的表格具有相同的边距。因此，基本上，桌子“klanten”必须向右移动一点，而另一张桌子（laaste 5 reserveringen）必须向左移动一点。你需要将它们的边缘拉伸吗？@sergeykuznetsov我想要的是在

#logo{
    }

    body{
        background-color: #FCFCFC;
    }


    #total-orders{
        background-color: #4cb4c7;
    }


    #orders-delivered{
        background-color: #7abecc;
    }

    #orders-pending{
        background-color: #7CD1C0;
    }


@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}