Как поставить кнопку в нижнем левом углу окна

Question

Предположим, у меня есть 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>

Answer 1

Вы можете использовать Bootstrap 4 mt-auto класс, например, так:

• m - устанавливает запас
• t - устанавливает значение margin-top или padding-top
• auto - устанавливает значение поля auto

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

Answer 2

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

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

Оформить заказ на скрипку: https://jsfiddle.net/4uvf6Lge/

Answer 3

Использование flexbox

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>

Answer 4

Вы можете сделать это, используя простой 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>