0

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.

introducir la descripción de la imagen aquí

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.

1 respuesta 1

0

puedes hacerlo con con la clase btn-group de boostrap:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="btn-group">
  <button type="button" class="btn btn-primary">Izquierdo</button>
  <button type="button" class="btn btn-danger">Central</button>
  <button type="button" class="btn btn-success">Derecho</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.