保持按钮行内联并溢出 x（在移动版本中）

Question

使用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>

Answer 1

更改外部 div 以也使用 flex-nowrap class:

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

保持按钮行内联并溢出 x（在移动版本中）

Keep row of buttons inline and with overflow x (in the mobile version)

html

css

responsive-design

twitter-bootstrap

bootstrap-4