关于html：如何在Bootstrap列中将元素与底部对齐？


How to align element to bottom in a Bootstrap column?

我需要在自举程序列的左下方对齐一个框。谢谢您的帮助。

How

相关讨论

您可以将列设置为flexbox，然后将元素与末尾对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.row {
  background: red;
}

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

.bottom {
  background: green;
  align-self: flex-end;
  width: 100px;
  height: 50px;
}
1
2
3
4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

 
    Bottom

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

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

在Bootstrap 4中，

可以在列本身上使用mt-auto将项目与底部对齐。默认情况下它应该已经向左对齐

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

1
2
3
4
5
.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
}

然后检查位置，将其更改为适合您的

在Bootstrap 4中

对于整行中的所有列，请在该行上使用align-items-end类

对于单列，我们在col

上为align-self-end

文档：https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

如果您不想玩CSS，可以设置：

class="mb-0"

这会将边距底部设置为零，并将您的内容放到其所在单元格的底部
您可以按照类似的方式在其他方向上对齐它：mb，mt，mr，ml