[英]Distribute buttons (elements) evenly in columns
I have been trying to implement a keypad-like widget using bootstrap. 我一直在尝试使用bootstrap实现类似键盘的小部件。
Here is a reconstruction of the problem at hand: 这是对手头问题的重建:
<div>
<div class="row">
<span class="col-md-3">
<button class="btn btn-lg btn-warning">1</button>
<button class="btn btn-lg btn-warning">2</button>
<button class="btn btn-lg btn-warning">3</button>
</span>
</div>
<div class="row">
<span class="col-md-3">
<button class="btn btn-lg btn-warning btn-block">SPAN</button>
</span>
</div>
</div>
The problem with this is that the buttons labelled 1, 2 and 3 are not spread out evenly to fill the 3 column width parent. 这样的问题是标记为1,2和3的按钮没有均匀展开以填充3列宽父级。
Now, I do know there is the btn-group-justified
class that I can use, but it stretches the buttons to fit the width of the parent. 现在,我知道我可以使用btn-group-justified
类,但它会拉伸按钮以适合父级的宽度。 What I want is to add fillers between the buttons. 我想要的是在按钮之间添加填充物。
Can that be accomplished using Bootstrap or should I use display: table
or some weird voodoo code involving margins. 可以使用Bootstrap完成,还是应该使用display: table
或一些涉及边距的奇怪的巫毒代码。
How about a nested row? 嵌套行怎么样?
http://jsfiddle.net/isherwood/XGb89/ http://jsfiddle.net/isherwood/XGb89/
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-xs-4 text-center">
<button class="btn btn-lg btn-warning">1</button>
</div>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.