Держите ряд кнопок встроенными и с переполнением х (в мобильной версии) - PullRequest
Новая
       8

Держите ряд кнопок встроенными и с переполнением х (в мобильной версии)

1 голос
/ 28 февраля 2020

Используя bootstrap, я разработал линию с кнопками.

Моя проблема в том, что когда я уменьшаю размер экрана до мобильной версии, кнопки не совпадают, как показано на рисунке.

Есть ли способ всегда ставить эти кнопки в линию и, если необходимо, с помощью прокрутки overflow-x?

Демо 

  <div class="row justify-content-center" style="margin-top: 160px;">
    <a style="color: #51CC8B;" class="btnP" >Tots
      <span class="nav-link btn-glyphicon1">34</span>
    </a>
    <a style="color: #4981C2;" class="btnR">Drops
      <span class="nav-link btn-glyphicon">6</span>
    </a>
    <a style="color: #4981C2;" class="btnD">Drags
      <span class="nav-link btn-glyphicon">3</span>
    </a>
  </div>

image

1 Ответ

1 голос
/ 28 февраля 2020

Измените внешний div, чтобы также использовать класс flex-nowrap: 

<div class="row justify-content-center flex-nowrap" style="margin-top: 160px;">
...