引导按钮对齐小屏幕宽度

Question

okay I'm styling some buttons for a mini survey site I am building and I am happy with how it looks on a desktop, but when i resize the browser window to a size that resembles a phone I cant get the buttons to just align under eachother. the desktop sized version has 2 rows, one with 3 buttons and one with 2 buttons.

full size desktop it looks ok :

reduced width:

my button code :

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

I am trying to get the buttons to align themselves one per one under eachother instead of 2 buttons then one then 2 again and text getting outside the buttons in the second picture...

any help?

thanks

Answer 1

Try adding the class class="col-xs-12" instead of class="col-xs-6' to the button divs .

This means the buttons will occupy all 12 grid columns at the xs resolution, rather than 2 buttons at col-6

Answer 2

thanks i got it now the lower two buttons needed a declaration for md and now its fixed, i understand how it works now the grid xs md lg system ...

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