Задать вопрос
@MRcracker
html

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

Использую 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>
  • Вопрос задан
  • 1196 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@Nikolays93
Web-разработчик
добавить к классу col-sm-auto еще col (он задаст padding: 15px) или
.button {
    margin-left: 5px;
    margin-right: 5px;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
natojezlo
@natojezlo
margin
Ответ написан
4 комментария
4 комментария
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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Каталог AI tools
18 апр. 2024, в 01:12
150000 руб./за проект
Загрузка характеристик из xml/csv файла в карточки товаров WordPress
18 апр. 2024, в 00:58
5000 руб./за проект
Нарисовать подарки для соц сети
18 апр. 2024, в 00:10
50000 руб./за проект
Ещё заказы