@MRcracker

Как сделать чтобы кнопки не прилипали друг на друга на маленьких разрешениях?

Использую bootstrap 4. Сделал две кнопки. При адаптации на маленьких устройствах они становятся друг за другом, но одна кнопка прилипает к другой. Как исправить проблему?
<div class="row">
											<div class="col-sm-auto">
												<a href="#" class="button button_right">Скачать</a>
											</div>
											<div class="col-sm-auto">
												<a href="#" class="button">Подробности</a>
											</div>
										</div>
  • Вопрос задан
  • 1252 просмотра
Решения вопроса 1
@Nikolays93
Web-разработчик
добавить к классу col-sm-auto еще col (он задаст padding: 15px) или
.button {
    margin-left: 5px;
    margin-right: 5px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Anadi
@Anadi
Если ответ Вам помог мой, решением отметье его!
У 4 версии для маленьких экранов по умолчанию классы col-1, col-2, col-auto не исключение. Классы col-sm-* начинают работать от ширины экрана 540px, если меньше то col-(1,2,3...12) и т.д. Так же col-* без префикса sm, md можно использовать если у вас блок на всех экранах будет одного размера. Например
<div class="col-12"></div>

В вашем случае.
<div class="row">
          <div class="col-auto">
                    <a href="#" class="button button_right">Скачать</a>
          </div>
          <div class="col-auto">
                    <a href="#" class="button">Подробности</a>
          </div>
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы