Bootstrap рядом друг с другом кнопки не пропускают, когда кнопки переставляют на маленьких экранах - PullRequest
Новая
       10

Bootstrap рядом друг с другом кнопки не пропускают, когда кнопки переставляют на маленьких экранах

0 голосов
/ 17 ноября 2018

Так что я могу просто получить две кнопки рядом друг с другом, но когда экран слишком маленький, кнопки переставляются сверху вниз (как они должны), но проблема в том, что между ними нет никакого разрыва, напримерэто то, как мои кнопки выглядят на экране «нормального» размера

Пример изображения 1

Но на маленьком устройстве это выглядит так

Пример изображения 2

Как вы можете видеть, между кнопками теперь нет зазора, когда они переставляются сверху вниз на меньшем устройстве, есть ли способ исправить это?

Вот фрагмент используемого HTML 

<div style="text-align: center;">
    <a href="#" class="btn btn-info" role="button">btn example 1</a>
    <a href="#" class="btn btn-info" role="button">btn example 2</a>
</div>

Ответы [ 3 ]

0 голосов
/ 17 ноября 2018

Вы можете добавить только margin в css, тогда между вашими кнопками будет маржа: 

<div style="text-align: center;">
    <a href="#" class="btn btn-info" role="button">btn example 1</a>
    <a href="#" class="btn btn-info" style="margin:3px;" role="button">btn example 2</a>
</div>

plunker: http://plnkr.co/edit/8B4Wifa8aTqVaFaZcasg?p=preview

0 голосов
/ 17 ноября 2018

Добавьте следующий класс к вашим кнопкам. 

.my-sm-1

Или следующее, до последней кнопки 

.mb-sm-1

И это все!

Подробнее https://getbootstrap.com/docs/4.1/utilities/spacing/

0 голосов
/ 17 ноября 2018

Вы можете добавить margin к каждому .btn, и вы действительно должны использовать flex-утилиты Bootstrap для управления выравниванием кнопок. 

.btn {
  margin: 0.25em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex justify-content-around flex-wrap">
  <a href="#" class="btn btn-info" role="button">btn example 1</a>
  <a href="#" class="btn btn-info" role="button">btn example 2</a>
  <a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>

<hr/>

<div class="d-flex justify-content-center flex-wrap">
  <a href="#" class="btn btn-info" role="button">btn example 1</a>
  <a href="#" class="btn btn-info" role="button">btn example 2</a>
  <a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>

<hr/>

<div class="d-flex justify-content-between flex-wrap">
  <a href="#" class="btn btn-info" role="button">btn example 1</a>
  <a href="#" class="btn btn-info" role="button">btn example 2</a>
  <a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>
...