如何在 div bootstrap 中将 div 与底部对齐

Posted 2023-03-05

【中文标题】如何在 div bootstrap 中将 div 与底部对齐

【英文标题】：How to align div to bottom inside div bootstrap

【发布时间】：2018-04-03 07:01:18

【问题描述】：

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"  />
                </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 内的底部对齐：

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

【问题讨论】：

Bootstrap 3 Align Text To Bottom of Div的可能重复

@Rob Nah 这是将 div 内的 div 而非文本对齐到 div 的底部

文本在 div 内，但您的问题还有许多其他重复项。你在发帖前搜索过吗？

@Rob 这不是关于文本，而是关于将另一个 DIV 中的 DIV 对齐到底部。是的，我搜索了所以

【参考方案1】：

您也可以只使用 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</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 bg-info" 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，并根据您希望它左对齐还是右对齐来选择开始或结束。 p>

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

【讨论】：

有没有办法做到这一点但与父 div 的中心对齐？

文档没有提供在中间对齐的选项，但您可以尝试 justify-content-center。我觉得这可能行不通。需要查看您的代码以了解您要执行的操作。

【参考方案2】：

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

position : absolute
bottom   : 0

【讨论】：

问题：但是内部 Div 不再居中。它将转到左下角。

因此，如果您使用的是bootstrap4，那么只需在外部 div 上添加类 justify-content-center。这将使内部 div 居中