如何将 div 对齐到 div bootstrap 中的底部

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%。我尝试添加引导程序类 align-bottom 但不知何故这不起作用。谁能帮帮我？

原文由 Sander Bakker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

position : absolute
bottom   : 0

原文由 Fahad Subzwari 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

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

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

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

原文由 kelly1025 发布，翻译遵循 CC BY-SA 4.0 许可协议