我在一列中使用了普通的 bootstrap 3 按钮组,例如
<div class="col-sm-1">
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
当有空间时这是垂直的,但是当它下降到新行时它变成水平的。我唯一的问题是垂直时看起来有点奇怪。我试过使用 CSS 无济于事,有人有建议吗?我不介意让它完全正方形,所以水平/垂直相似,但我为此所做的努力没有奏效
最佳答案
如果完全方形的按钮对你来说没问题,像这样的东西应该可以工作:
CSS:
#group button:first-child, #group button:last-child {
border-radius: 0;
}
#group button:first-child {
margin-left: -1px;
}
HTML:
<div class="col-sm-1">
<div id="group" class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
关于css - 使垂直流向水平的按钮组干净利落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26091284/