Css 列出在网格中排列的按钮（不带檐槽）

所以我已经为页面设置了所有数据，但是我的CSS不太正确，我似乎无法在其他地方找到解决方案来解决这个问题。使用Knockout和bootstrap3以及几个小插件使模板制作变得更容易。不过这都是默认的CSS代码

我的模型中有一组对象填充了此页面：

代码：

因为这都是实时生成的，每个屏幕大小都有不同的大小，我不能把它放在一行中，所以有没有其他方法可以像这样复制按钮之间的边距，但保持统一的按钮大小（也有一个上/下边距与左/右相同的大小）

没有其他样式表或js干扰UI，只是将按钮样式更改为disabled/default/success

---

或者，我可以将其设置为“Modern/Metro”主题，并从按钮中去掉边框半径，但这似乎有点像是在逃避责任，甚至还有边距，以确保它们易于查看。

行不产生边距，事实上引导中的边沟是通过填充创建的。当你把一个btn类放在一个col-上时，它接受btn填充，然后消耗空间，因为btn在col-css之后。您可以使用重新命名的柱网创建一组新的css，然后设置边距，而不是填充。这就像使用人们使用框大小之前的网格：border box或旧的bootstrap 2网格，其名称完全不同，但可以进行调整。这将是一个很大的工作，但是一个更简单的想法是，在按钮内放置一个span，然后删除btn上的btn样式，并将其放置在btn>span上，然后在该span上添加一些边距，您已将其更改为blockThank，Christina。我将按钮放在一个跨距中，在元素之间添加了默认的边沟（如图所示：）。但是，它不像面板那样包含顶部/底部分离。理想情况下，我希望在所有侧面都有一个小的~4px间隙，不会干扰面板主体的填充，但这确实有点帮助。在Bootstrap中没有简单的方法来创建这样一个大的按钮网格吗？我猜我可以有一个自定义的.col-###.col压缩css类，它将填充覆盖为2px，但我不知道如何做，这样就不会与父级的填充冲突。实际上，只需在跨距中添加一个2px padding类，就可以在按钮之间留出足够的间隙，而不会在面板内部找不到合适的位置。它也随着网格中有n个元素而扩展。非常感谢你至少为我指明了正确的方向，即使我稍微偏离了你的建议：）

<div class="tab-pane panel-body" id="mainContentEmpireTechnology">
    <div class="panel-group" data-bind="foreach: technology.data">
        <div class="panel panel-default" data-bind="visible: isUnlocked() || $root.advancedTech()">
            <div class="panel-heading" data-toggle="collapse" data-bind="attr: {'data-target': '#collapseEmpireView'+idName}">
                <h4 class="panel-title">
                    <span data-bind="text: publicName"></span>
                </h4>
            </div>
            <div data-bind="attr: {id: 'collapseEmpireView'+idName}" class="panel-collapse collapse in">
                <div class="panel-body" data-bind="foreach: data">
                    <button class="btn col-md-3 col-sm-4" data-bind="css: cssStyle, visible: isUnlocked() || $root.advancedTech(), click: modalShow, text: publicName"></button>
                    <div data-bind="modal: {
                        visible: modal.visible,
                        header: { name: modal.headerTemplate, data: $data },
                        body: { name: modal.bodyTemplate, data: $data },
                        footer: { name: modal.footerTemplate }
                    }"></div>
                </div>
            </div>
        </div>
    </div>
</div>