Bootstrap按钮对齐小屏幕宽度

Question

好吧我正在为我正在构建的迷你调查网站设计一些按钮，我对它在桌面上的外观感到满意，但是当我将浏览器窗口调整为类似于手机的大小时，我无法获得按钮只是在彼此之下对齐。桌面大小的版本有2行，一行有3个按钮，另一行有2个按钮。

全尺寸桌面看起来不错：

宽度减小：

我的按钮代码：

<div class="panel-body" style="padding-bottom:0px;">
    <div class="row"> 
        <div class="btn-group btn-group-justified mg0 pd0"role="group" aria-label="...">
        <div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice1" value="<?php echo $aId[0];?>"><?php echo $aTitle[0];?></button>
        </div><div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice2" value="<?php echo $aId[1];?>"><?php echo $aTitle[1];?></button>
        </div><div class="col-xs-6 col-sm-4 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice3" value="<?php echo $aId[2];?>"><?php echo $aTitle[2];?></button>
        </div>
    </div>
    </div><div class="row">
      <div class="btn-group btn-group-justified mg0"role="group" aria-label="...">
          <div class="col-xs-6 mg0 pd0">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice4" value="<?php echo $aId[3];?>"><?php echo $aTitle[3];?></button>
          </div><div class="col-xs-6 mg0 pd0">
         <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice5" value="<?php echo $aId[4];?>"><?php echo $aTitle[4];?></button>
          </div>
      </div>
    </div>
</div>

我试图让按钮在彼此之下每一个对齐，而不是2个按钮，然后再一个然后再按2，文本在第二张图片中超出按钮...

任何帮助？

感谢

Answer 1

尝试将班级class="col-xs-12"而不是class="col-xs-6'添加到按钮divs。

这意味着按钮将占用xs分辨率的所有12个网格列，而不是col-6的2个按钮

Answer 2

谢谢我现在得到它，下面的两个按钮需要md的声明，现在已经修复了，我明白它现在是如何工作的网格xs md lg系统...

<div class="btn-group btn-group-justified mg0 "role="group" aria-label="...">
          <div class="mg0 pd0 col-xs-12 col-md-6">
        <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice4" value="<?php echo $aId[3];?>"><?php echo $aTitle[3];?></button>
          </div><div class="mg0 pd0 col-xs-12 col-md-6">
         <button type="button" class="btn btn-default btn-lg btn-block" id="btnChoice5" value="<?php echo $aId[4];?>"><?php echo $aTitle[4];?></button>
          </div>
      </div>