使按钮组垂直流动到水平干净

Question

我在一列中使用了一个普通的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无济于事，有人有建议吗？我不介意使它完全正方形，所以横向/纵向是相似的，但我这样做的努力没有奏效

Answer 1

如果完全方形按钮对你好，那么这样的事情应该有效：

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>

Answer 2

之前我曾创造过这样的东西。

DEMO：http://jsbin.com/vahaq/1/

假设768px及以上是垂直的，就是这样，所以我只修改了最小宽度以下的样式。

HTML（与您的相同，但使用btn-group-vertical和btn-group-custom）

<div class="col-sm-1">
  <div class="btn-group-vertical btn-group-custom">
    <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>  

这是更精细的，因为它开始并开始真正良好的响应能力：

@media (max-width:299px) { 
    .btn-group-vertical.btn-group-custom > .btn {
        float: left;
        width: auto;
        width: 25%;
        min-height: 50px;
        min-width: 50px;
        margin-top: -1px!important;
    }
    .btn-group-vertical.btn-group-custom .btn + .btn {
        margin-left: -1px;
        margin-top: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:first-child {
        margin-top: 0;
        margin-left: -1px;
        border-radius: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:last-child {
        border-radius: 0
    }
}
@media (min-width:300px) and (max-width:767px) { 
    .btn-group-vertical.btn-group-custom > .btn {
        float: left;
        width: auto;
        border-top: 1px solid #ccc;
    }
    .btn-group-vertical.btn-group-custom .btn + .btn {
        margin-left: -1px;
        margin-top: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:first-child {
        border-radius: 4px 0 0 4px
    }
    .btn-group-vertical.btn-group-custom > .btn:last-child {
        border-radius: 0 4px 4px 0
    }
}