如何将div与div引导程序内的底部对齐

Question

html, body, .sidebar-container, .sidebar-row {
    height: 100%;
}

.sidebar {
    background-color: #2C3544;
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: block;
        background-color: #2C3544;
    }
}
img{
    margin: auto;
    display: block;
}
.sidebar-image{
    margin-top: 15px;
}
.sidebar-items{
    margin-top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid sidebar-container">
    <div class="row sidebar-row">
        <div class="col-md-2 sidebar">
            <div class="container-fluid">
                <div class="col-md-12 sidebar-image">
                    <img src="assets/logo-white.png" width="75px" height="75px"/>
                </div>
            </div>
            <div class="row sidebar-items">
                <div class="col-md-12">
                    <ul class="list-group">
                        <li class="list-group-item">Dashboard</li>
                        <li class="list-group-item">Projects</li>
                        <li class="list-group-item">Statistics</li>
                    </ul>
                </div>
            </div>
            <div class="row align-bottom">
                hafldjalfjsdlfsjdlfsjlfs
            </div>
        </div>
        <div class="col-md-10 offset-md-2 content">
            Main Content
        </div>
    </div>
</div>

我编写了以下HTML / CSS代码，试图将div与另一个div的底部对齐：

我想将最后一个div对齐col-md-2到sidebar-container高度为100％的底部。我尝试添加bootstrap类，align-bottom但是以某种方式不起作用。有人可以帮我吗？

Answer 1

你也可以只使用 bootstrap flexbox 来做到这一点。

<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

将项目左对齐或右对齐确保d-flex align-items-end flex-column在父元素上包含整个元素，并根据您希望它左对齐还是右对齐来选择开始或结束。

将项目与底部对齐然后，mt-auto在要粘贴到父级底部的 div 上使用。

Answer 2

假设您有2个div。Div A（外部）和Div B（内部）。要完成您的任务，只需将Div B代码放在Div A代码中，并在Div B css类中添加此代码

position : absolute
bottom   : 0