我有一些按钮是从一个敲除可观察数组中进行数据绑定的，如：

<div class="col-9 btns" data-bind="foreach: groupedDays">
     <div class="btn-group btn-group-outline" data-bind="foreach:$data, css: {active: $data[0].active != false}">
          <button data-bind="css: active == false ? 'btn btn-white btn-xs' : 'btn btn-dark btn-xs', click:$data.click, text:$data.text"></button>
     </div>
</div>

groupedDays包含4个元素：1.星期一，2.星期二，3.星期三，4.星期四，星期五，星期六和星期日，因为它们的颜色是相同的，一个接一个
我的自定义类是：

.btns {
display: flex;
}

.btn-group-outline {
    display: flex;
    outline-offset: 1.5px;
}
.btn-group-outline.active {
    outline: 2px solid black;
    z-index: 3000;
}
.btn-group-outline > .btn:not(:first-child){
    margin-right: 0;
}

我的组合按钮看起来像

，但我不知道如何使它们填充col-9 div，因为现在大约是div的一半，应该看起来像

，但有轮廓