Buen día, estoy trabajando con Bootstrap 3 y tengo dos botones "Anterior" y "Siguiente" agrupados de la siguiente manera:
<div class="row">
<div class="col-md-3 col-md-offset-9 text-right" >
<div class="btn-group" role="group">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-step-backward"></span> Anterior</button>
<button class="btn btn-default" type="button">Siguiente <span class="glyphicon glyphicon-step-forward"></span></button>
</div>
</div>
</div>
En la resolución para móviles los botones se visualizan verticalmente, independientemente de la unidad de rejilla que utilice.
¿Hay alguna manera de poder dejar ambos botones alineados horizontalmente para dicha resolución?
ACTUALIZACIÓN: Para que ambos botones tomen el 50% del contenedor en la versión móvil, utilicé estas dos clases CSS, dejo un ejemplo.
<style>
.contenedor-botones {
display: block;
width: 100%;
}
.boton-adaptado {
width: 50%;
}
</style>
<div class="row">
<div class="col-md-3 col-md-offset-9 text-right">
<div class="btn-group contenedor-botones" role="group">
<button class="btn btn-default boton-adaptado" type="button"><span class="glyphicon glyphicon-step-backward"></span> Anterior</button>
<button class="btn btn-default boton-adaptado" type="button">Siguiente <span class="glyphicon glyphicon-step-forward"></span></button>
</div>
</div>
</div>
NOTA: Por favor, si encuentran una manera más limpia para evitar el uso de clases extras corríjanme. Gracias.