引导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.
在此先感谢!
答
试试这个:
.question{
position: relative;
}
.r-answer{
position: static;
}
.r-answer .btn-group{
position: absolute;
top: 50%;
margin-top: -17px;
}
Aslong的按钮停留在规模,这将让他们对准中心相同,否则就需要javascript来解决这个问题。
+0
感谢您的解决方案!它工作正常!按钮的大小保持不变。 – 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是修改后的代码
的div不表。按钮div不会与文本缩放。 – Gant
也许你应该写更多关于你迄今为止尝试过的内容。 – Mark