[英]Bootstrap button alignment small screen width
好吧,我正在為正在構建的小型調查站點設計一些按鈕的樣式,並且對它在桌面上的外觀感到滿意,但是當我將瀏覽器窗口的大小調整為類似於手機的大小時,我無法使按鈕在下面對齊彼此。 桌面版的版本有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個,文本在第二張圖片的按鈕之外...
有什么幫助嗎?
謝謝
嘗試將class class="col-xs-12"
而不是class="col-xs-6'
到按鈕divs
。
這意味着按鈕將以xs分辨率占據所有12個網格列,而不是col-6處的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.