bootstrap datatable button escono fuori dalla colonna

[pippuccio76]

Come da titolo ho tre button nella prima colonna di un datatable :

  <table id="tabella-catalogo" class="table table-striped dt-responsive nowrap w-100 cell-border" style="">


                <thead>
                    <tr>
                        <th class=''><i class='mdi mdi-filter'></i> Opzioni </th>
                        <th class=''>Num</th>
                        <th class=''>Cliente</th>
                        <th class=''>Sede</th>
                        <th class=''>Data</th>
                        <th class=''>Casuale del trasporto</th>
                        <th class=''>A mezzo</th>
                        <th class=''>Aspetto beni</th>
                        <th class=''>N colli</th>


                        <th class=''>Data ora_ritiro</th>
                        <th class=''>Creato</th>
                        <th class=''>Modificato</th>


                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($lista as $row) : ?>


                        <tr>




                            <td>
                                <div class="row">
                                    <div class="col-md-4">
                                        <a href='/user_Ddt/modificaRecord/<?= $row->id ?>' class='btn btn-primary btn-sm' title='modifica'><i class="fas fa-pencil-alt"></i></a> 


                                    </div>
                                    <div class="col-md-4 ">
                                        <a href='/user_Ddt/eliminaRecord/<?= $row->id ?>' alt='elimina' class='btn btn-danger btn-sm' onClick="return confirm('Sei sicuro di voler eliminare il record?');" title='elimina'><i class="fas fa-trash-alt"></i></a>


                                    </div>
                                    <div class="col-md-4 ">
                                        <a href='/UserPdf/mostraDdt/<?= $row->id ?>' alt='elimina' class='btn btn-warning btn-sm' title='Stampa' target="_blank"><i class="fa-solid fa-file-pdf"></i></a>


                                    </div>
                                </div>






                            </td>


                            <td> <?= $row->numero ?></td>


                            <td> <?= $row->cliente()->nome ?></td>
                            
                            <td> <?= $row->sede_cliente()->nome ?></td>




                            <td> <?= date_local_format_from_iso($row->data) ?></td>


                            <td> <?= $row->casuale_del_trasporto()->nome ?></td>


                            <td> <?= $row->a_mezzo()->nome ?></td>


                            <td> <?= $row->aspetto_beni()->nome ?></td>


                            <td> <?= $row->n_colli ?></td>


                            <td> <?= date_local_format_from_iso($row->data_ora_ritiro) ?></td>


                            <td> <?= date_local_format_from_iso_completa($row->created_at) ?></td>


                            <td> <?= date_local_format_from_iso_completa($row->updated_at) ?></td>


                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>

come da immagine i button escono dalla colonna


https://i.imgur.com/YS3qO7J.png


ho visto se dal .row tolgo --bs-gutter-x: 1.5rem; i pulsanti rimangono dentro la colonna ma attaccati

come metto i pulsanti su un unica riga ma separati ?

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

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

[pippuccio76]

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:

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

Già così è perfetto , grazie mille ,nel caso abbia bisogno di piccoli aggiustamenti nel caso chiedo ,grazie ancora

[KillerWorm]

ottimo