如何将按钮放在div的左下角答案

【问题标题】：How to put button to the botton left in the div如何将按钮放在div的左下角
【发布时间】：2020-06-17 22:43:45
【问题描述】：

假设有一个带有按钮的 div，我想把这个按钮放在左下角：

----------------------------


button
---------------------------

这是我的html：

<div class="col-12">
  <div class="col-md-12">
    <button type="button" label="Cancella Stazioni selezionate" style="margin-top:10%"></button>
  </div>
</div>

【问题讨论】：

标签： html css sass bootstrap-4

【解决方案1】：

使用弹性盒

align-self:flex-end

.col-md-12 {
  border: 1px solid red;
  height: 200px;
  align-items: flex-start;
}

button {
  align-self: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-12">
  <div class="col-md-12 d-flex">
    <button type="button" label="Cancella Stazioni selezionate">Button</button>
  </div>
</div>

或align-items:flex-end

.col-md-12 {
  border: 1px solid red;
  height: 200px;
  align-items: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-12">
  <div class="col-md-12 d-flex">
    <button type="button" label="Cancella Stazioni selezionate">Button</button>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以像这样使用 Bootstrap 4 mt-auto 类：

m - 设置边距
t - 设置 margin-top 或 padding-top
自动 - 将边距设置为自动

.wrapper {
  height: 200px;
  background-color: #E6E2EB;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper d-flex">
  <div class="mt-auto p-2">
    <button type="button" label="Cancella Stazioni selezionate">Button</button>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以使用简单的 CSS 技巧做到这一点：position。

.container
{
   
   border: 1px dashed grey;
   height: 10em;
   background-color: #def;
   position: relative;
}

button
{
 position: absolute;
 bottom: 0;

}

<div class="col-12">
 <div class="col-md-12 container">
   <button type="button" label="Cancella Stazioni selezionate">Button 1</button>
   
 </div>
</div>

【讨论】：

【解决方案4】：

<button class="myclass">
  CLick
</button>

.myclass{
  position: fixed; 
  left: 0px; 
  background-color: green; 
  bottom: 0px
}

查看这个小提琴：https://jsfiddle.net/4uvf6Lge/

【讨论】：