[英]Bootstrap 3: vertically centered buttons
我想在一列中垂直居中一組按鈕 (見圖)。 行的高度是動態的。 我嘗試了很多我發現的東西,但沒有任何作用。
截圖: https : //www.dropbox.com/s/ztogupb46o1rfym/bootstrap.PNG
<div class="row question even">
<div class="col-sm-7 col-md-9 text r-text">
<div>
dynamic content
</div>
</div>
<div class="col-sm-5 col-md-3 r-answer" id="radio">
<input class="answerradio" id="question3" name="question3" type="hidden" value="4">
<div class="btn-group" data-target="question3" data-toggle="buttons-radio">
<button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
</div>
</div>
</div>
這是我的整個代碼: http : //bootply.com/95760
有一個想法嗎?
我正在使用Bootstrap 3。
提前致謝!
嘗試這個:
.question{
position: relative;
}
.r-answer{
position: static;
}
.r-answer .btn-group{
position: absolute;
top: 50%;
margin-top: -17px;
}
只要按鈕的大小保持不變,這將使它們對齊中心,否則你將需要javascript來修復它。
有點晚了但是嘗試使用button-group-vertical類而不是button-group:
<div class="btn-group-vertical" data-target="question3" data-toggle="buttons-radio">
<button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
<button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
</div>
這是修改后的代碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.