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

Question

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

Answer 1

[Nikolay S.]

добавить к классу col-sm-auto еще col (он задаст padding: 15px) или

.button {
    margin-left: 5px;
    margin-right: 5px;
}

Answer 2

[азаза]

margin

Comments

[MRcracker]

Добавить его отдельным классом между кнопками?

[азаза]

MRcracker, разумеется

[MRcracker]

natojezlo, не сработает его надо вставлять в div к одной из кнопок

[азаза]

!important допишите

Answer 3

[I'm Yoda]

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