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:
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.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>
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.
Rispondi quotando