Блог

Как я могу создать две фиксированные горизонтально выровненные кнопки внизу только на мобильных экранах с помощью css или bootstrap? Я попробовал, но это сработало не так, как ожидалось.

 <style>
.mobileShow{
    display: none;
    z-index: 999;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow {
    display: block;
    width: 50%;
    position: fixed;
    bottom: 0;
    left: 50%;
  }
}
</style>

<div class="mobileShow">
  <div class="d-flex justify-content-between">
    <button class='btn btn-lg btn-success btn-block'>Login</button>
    <button class='btn btn-lg btn-primary btn-block'>Register</button>
</div>
 

Вы, вероятно, захотите использовать max-width вместо max-device-width . Также вам не хватает закрытия <div> внизу.

HTML:

 <div class="mobileShow">
  <div class="d-flex justify-content-between">
    <button class='btn btn-lg btn-success btn-block'>Login</button>
    <button class='btn btn-lg btn-primary btn-block'>Register</button>
  </div>
</div>
 

CSS:

 .mobileShow{
    display: none;
    z-index: 999;
}

.mobileShow .btn.btn-block {
  margin-top: 0;
}

@media only screen and (max-width: 767px) {
  .mobileShow {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
 

Я создал для вас рабочий пример здесь: https://codepen.io/bj-rn-nyborg/pen/bGwGpzN