如何让这个div到底部？

Question

如何让这个div到达底部？

这是代码：

<div class="container-fluid">
<div class="row customRows">
    <div class="col col-md-3">
        <div class="d-flex mb-4">
            <img src="{% static '/img/cat.png' %}" alt="Logo" class="img-fluid w-25 align-self-center">
            <h1 class="heading-4 align-self-center">Que vamos a estudiar hoy?</h1>
        </div>
        <ul class="m-0 p-0">
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Inicio
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Chat
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Ingresa a tu clase
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Buscar clases
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Calendario
                </p>
            </a>
        </ul>
        <div class="text-center">
            <img src="{% static '/img/laying.png' %}" alt="" class="w-75">
        </div>
        <div class="profileContainer row p-2 mt-auto">
            <div class="col-2">
                <img src="{% static '/img/girl3.png' %}" class="w-100">
            </div>
            <div class="col-10 my-auto">
                <a href="#" class="text-decoration-none">
                    <p class="parrafo menuItem rounded-2 p-2 m-0">
                        Nombre Usuario
                    </p>
                </a>
            </div>
        </div>
    </div>
    
    <div class="col col-md-9"></div>
</div>

我尝试过的东西是来自bootstrap的mt-auto类，来自bootstrap的

mb-auto

（检查

ul

是否将容器推到底部），CSS中的marging-bottom auto，d-flex和flex-具有 Flex Growth 的列（这有点有效，但改变了内容的分布）。

.menuItem {
  transition: background-color 0.3s ease;
  border-bottom: 1px solid var(--grisClaro2);
 }

 .menuItem:hover {
  background-color: var(--grisClaro2)!important;
 }

.profileContainer {
 border-top: 1px solid var(--grisClaro2);
}

.customRows {
 height: 100vh;
}

Answer 1

我在此处添加了这些类“”，并且在配置文件容器中使用 mt-auto，div 下降了，但没有破坏分发