Question

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我编写了这个HTML / CSS代码，尝试将div与另一个div中的底部对齐：

我想将col-md-2中的最后一个div与sidebar-container的底部对齐，其高度为100％。我尝试添加引导类align-bottom，但不知怎的，这不起作用。谁能帮助我？

Answer 1

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

position : absolute
bottom   : 0

Answer 2

您也可以只使用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包含在父元素中，并根据要向左或向右对齐来选择开始或结束。

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

如何在div bootstrap中对齐div到bottom

2 个答案: