Originariamente inviata da
KillerWorm
Ciao, una soluzione può essere l'uso dell'utility
flex di Bootstrap (per v4 e successive versioni).
Dentro il <td> potresti impostare una cosa del genere:
codice HTML:
<td>
<div class="d-inline-flex w-100 justify-content-center gap-1 gap-lg-3"> <a href='...' class='btn btn-primary btn-sm'>...</a> <a href='...' class='btn btn-danger btn-sm'>...</a> <a href='...' class='btn btn-warning btn-sm'>...</a> </div></td>
In questo caso non c'è bisogno di applicare dei <div> per impostare righe e colonne ma basta un unico contenitore
flex che conterrà direttamente gli elementi da distribuire in riga.
Ho usato
d-inline-flex (piuttosto che
d-flex) in modo che sia creato un elemento di tipo
inline il quale segue il flusso dei contenuti testuali e viene centrato verticalmente dentro il <td>.
Con
w-100 viene estesa la larghezza al 100% del <td>. Gli elementi <a> sono quindi centrati orizzontalmente usando
justify-content-center e resteranno sempre sulla stessa riga.
Puoi impostare uno spazio tra gli elementi usando
gap. In questo caso ho applicato
gap-1 (che di norma equivale a
0.25rem) come impostazione principale e
gap-lg-3 (cioè
1rem) per il breakpoint largo.
Ovviamente tali accorgimenti puoi impostarli come meglio preferisci.
Vedi se per te può andare. Fai sapere.