Css 引导包装按钮未对齐

我在桌面上有一组按钮排列得很好，但在手机上，当按钮缠绕时，第二排按钮与第一组按钮粘在一起，并从内部开始

关于这个问题，请看下面的小提琴；

HTML:

---

有什么办法可以解决这个问题吗？

删除

btn工具栏

类，它似乎在第一个元素之前添加了一个空格，因此不适合包装

您可能需要为每个按钮分别添加底部和右侧边距

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
身体{
利润率：10px；
}
.btn工具栏>.btn:第n个子项（1）{
左边距：5px；
}

---

看起来我更了解，而且我需要手动为每个按钮添加底部边距类？可能是这样或那样

<div role="toolbar" class="btn-toolbar bottom-buffer">
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
    <a class="btn btn-default btn-sm" href="">
        <span aria-hidden="true" class="glyphicon glyphicon-backward"></span>
        Button
    </a>
</div>