quiero hacer un agupamiento con los botones, pero la cosa es que cuando se usa la version movil del sistema, los botones se agrupan bien feo.
Alguien me podria dar una referencia o una mano para que se agrupen en linea, de tal manera que si se encoge la pantalla, da formato de telefono o agranda se vean en linea como normalmente se ven. El tema es que cuando le doy formato movil se ve asi los botones, unos encima de otros y se ve feo.
Este es el corto de codigo en donde estan los botones.
'<div style="margin:0 auto;margin-left:auto;margin-right:auto;text-
align:center;">
<button class="btn btn-primary btn-xs" data-toggle="tooltip" data-
placement="left" title="Editar"
onclick="mostrar('.$item->CodArticulo.')"><i class="fa fa-pencil"></i>
</button>' .
' <button class="btn btn-warning btn-xs" data-toggle="tooltip" data-
placement="left" title="Desactivar"
onclick="disable('.$item->CodArticulo.')"><i class="fa fa-power-off">
</i>
</button>' .
'<button class="btn btn-info btn-xs" data-toggle="tooltip" data-
placement="left" title="Detalles"
onclick="detalle('.$item->CodArticulo.')"><i class="fa fa-eye"></i>
</button>
</div>' :
'<div style="margin:0 auto;margin-left:auto;margin-right:auto;text-
align:center;">
<button class="btn btn-primary btn-xs" data-toggle="tooltip" data-
placement="left" title="Editar"
onclick="mostrar('.$item->CodArticulo.')"><i class="fa fa-pencil"></i>
</button>' .
' <button class="btn btn-success btn-xs" data-toggle="tooltip" data-
placement="left" title="Acivar"
onclick="enable('.$item->CodArticulo.')"><i class="fa fa-power-off">
</i>
</button>' .
' <button class="btn btn-info btn-xs" data-toggle="tooltip" data-
placement="left" title="Detalles"
onclick="detalle('.$item->CodArticulo.')"><i class="fa fa-eye"></i>
</button>
</div>'
Luego, tomar en cuenta que yo utilizo un table jquery que se alimenta de este codigo, por lo tanto estos botones se insertan en el campo que se ve en la dataTable "Accion", los otros son datos comunes.
Este es el formato de la dataTable.
<div class="panel-body table-responsive"
id="listado_registros">
<table id="tb_listado_article" class="table table-striped
table-bordered table-condensed table-hover">
<thead>
<th>COD</th>
<th>Nombre</th>
<th>Detalle</th>
<th>Estado</th>
<th>Updated</th>
<th>Accion</th>
</thead>
<tbody>
</tbody>
<tfoot>
<th>COD</th>
<th>Nombre</th>
<th>Detalle</th>
<th>Estado</th>
<th>Updated</th>
<th>Accion</th>
</tfoot>
</table>
</div>
Saludos gente.