引導3：垂直居中按鈕

我想垂直居中在一列中的一組按鈕（見圖）。該行的高度是動態的。我嘗試了很多我發現的東西，但沒有任何效果。引導3：垂直居中按鈕

截圖：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.

在此先感謝！

來源

2013-11-21 Max

的div不表。按鈕div不會與文本縮放。 – Gant

也許你應該寫更多關於你迄今爲止嘗試過的內容。 – Mark

試試這個：

.question{ 
    position: relative; 
} 
.r-answer{ 
    position: static; 
} 
.r-answer .btn-group{ 
    position: absolute; 
    top: 50%; 
    margin-top: -17px; 
}

Aslong的按鈕停留在規模，這將讓他們對準中心相同，否則就需要javascript來解決這個問題。

來源

2013-11-21 13:17:05 Razz

感謝您的解決方案！它工作正常！按鈕的大小保持不變。 – Max

來得有點晚，但試圖利用按鈕組垂直類代替按鈕組：

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

Here是修改後的代碼

來源

2014-08-17 17:20:33 Mehdi

引導3：垂直居中按鈕

回答

相關問題