列表按钮在没有装订线的情况下排列在网格中

Question

所以我已经为页面设置了所有数据，但我的CSS不太正确，我似乎无法在其他地方找到解决方案。使用Knockout和Bootstrap 3以及一些小插件来简化模板操作。这是所有默认的CSS代码。

我的模型中有一堆对象填充此页面：http://i.imgur.com/4Lcpkeb.jpg

代码：

<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>

由于这是所有实时生成的并且每个屏幕尺寸的大小不同，我不能将它连成一排，所以是否有另一种方法来重现按钮之间的边距，但保持统一的按钮尺寸（另外顶部/底部边距与左/右相同的尺寸？ http://i.imgur.com/x9kNafJ.jpg

没有额外的样式表或者js弄乱了UI，只是将按钮样式更改为禁用/默认/成功的东西。

或者我可以把它作为“现代/地铁”主题，并从按钮摆脱边界半径，但这似乎是一个警察，甚至有利润，以确保他们很容易见。