如何在Bootstrap列中将元素对齐到底部？

Question

我需要将一个框对齐到bootstrap列的左下角。谢谢帮助。

问题在于该列没有定义高度。

- Radek Homola

---

父元素相对定位，盒子绝对定位并 left:0 和 bottom:0。 - Álvaro Touzón

发一下你的代码吧，伙计。这样我们就可以帮助你了。 :) - Ankit Singh

问题在于 .col-6-md 没有定义高度...好的，我会发布。 - Radek Homola

您需要使两列的高度相同。然后将按钮位置设为绝对定位。这里是另一篇对您有帮助的帖子：https://dev59.com/tWIj5IYBdhLWcg3w_5vl - Mohammad Usman

我知道，但它只在高度被定义时才有效。不是Bootstrap列的东西。 - Radek Homola

Answer 1

您可以将列设置为flexbox，并将元素对齐到末尾。

.row {
  background: red;
}

.col-6-md {
  background: lightblue;
  height: 200px;
  display: flex;
}

.bottom {
  background: green;
  align-self: flex-end;
  width: 100px;
  height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-6-md">
    <div class="bottom">Bottom</div>
  </div>
</div>

- Gerard

Answer 2

在Bootstrap 4中，您可以在列本身上使用mt-auto来将项目对齐到底部。默认情况下，它应该已经左对齐。

- Nando

---

同样适用于Bootstrap 5，谢谢！敬礼 - Roar S.

Answer 3

.bottomdiv {
    border: 1px solid red;
    height: 50px;
    width: 50px;
    position:absolute;
    left:0;
    bottom:0;
}
.col-md-6.col-sm-6.col-xs-6 {
    display: table-cell;
    height: auto;
    border: 1px solid black;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <div class="bottomdiv">
             </div>             
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div></div>

- Dhaarani

---

一些解释会让答案更好。请看[回答]。 - isherwood

Answer 4

在Bootstrap 4中，对于整个行中的所有列，请在row上使用align-items-end类。对于单个列，请在col上使用align-self-end。文档链接：https://getbootstrap.com/docs/4.0/utilities/flex/#align-items。

- Yevgeniy Afanasyev

Answer 5

您也可以尝试使用绝对CSS功能。

.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
}

然后检查位置，将其更改以适合您的需求。

- Lord Kay

Answer 6

在Bootstrap 5中，您可以使用align-items-bottom类：

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

- falinhares

Answer 7

所以这很酷：

.bottom{
    position:absolute;
    bottom: 0.99rem;
}

- Jeova Guilherme Carvalho Filho

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 8

如果您不想使用CSS，只需设置：

class="mb-0"

它将把底部边距设置为零，并应该将内容放在其所在单元格的底部。 您可以用类似的方式将其对齐到其他方向：mb、mt、mr、ml

- mariubog