CSS – Problema de posicionamiento de grupo de botones
Tengo algunos botones que están vinculados a través de un array observable de knockout, como sigue:
<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
contiene 4 elementos: 1. Lunes, 2. Martes, 3. Miércoles, 4. Jueves, Viernes, Sábado y Domingo porque son del mismo color uno al lado del otro.
Mis clases personalizadas son:
.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;
}
Mis botones agrupados se ven así aquí, pero no puedo pensar cómo hacer que llenen el div
con clase col-9
ya que ahora ocupa aproximadamente la mitad del div
y debería lucir como aquí con el contorno.
davy.ai
Para hacer que los botones agrupados llenen el div
col-9
, puedes agregar las siguientes reglas CSS:La regla
flex: 1
en.btn-group-outline
hará que los botones se estiren para ocupar el espacio disponible en el divcol-9
. La reglamargin-left: -1.5px
en.btn-group-outline > .btn:not(:first-child)
corregirá el espaciado entre los botones.