Bootstrap 如何在div引导中将div与底部对齐

vwoqyblh  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(224)

第一个
我写了这段HTML/CSS代码,试图将一个div与另一个div中的底部对齐:
我想把col-md-2中的最后一个div对齐到sidebar-container的底部,sidebar-container的高度是100%。我试着添加引导类align-bottom,但不知何故,这不起作用。有人能帮我吗?

juud5qan

juud5qan1#

假设你有两个divs。Div A(外部)和Div B(内部)。要完成你的任务,只需将Div B代码放在Div A代码中,并在Div B css类中添加

position : absolute
bottom   : 0
xxe27gdn

xxe27gdn2#

您也可以只使用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,并根据您要它靠左或靠右对齐来选择start或end。
将item底部对齐然后,对要粘贴到父项底部的div使用mt-auto

sczxawaw

sczxawaw3#

使用Bootstrap网格系统时,我的解决方案如下:

  • d-flex添加到每个col-*
  • d-flex flex-column添加到每个card-body
  • mt-auto mx-auto加到最后一个元素(或元素的最后一个 div),我想粘到最后

在我看来,这防止了任何进一步的造型混乱。

syqv5f0l

syqv5f0l4#

相关文件:

  1. Bootstrap 5.0中的Flex对齐:https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
  2. Bootstrap 5.0中的垂直对齐:https://getbootstrap.com/docs/5.0/utilities/vertical-align/

**相关代码:**我在行/容器底部对齐div(文本)的方法

<div class="d-flex align-content-end flex-wrap mb-2">
    <span class="display-4 fw-bold text-black text-start mt-0 mb-0">Active Mural Projects</span>
</div>

相关问题