0

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>&nbsp;Anterior</button>
                <button class="btn btn-default" type="button">Siguiente&nbsp;<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>&nbsp;Anterior</button>
                <button class="btn btn-default boton-adaptado" type="button">Siguiente&nbsp;<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.

1
  • Si no me equiboco, tu pregunta debería ser: ¿Cómo alinear verticalmente 2 botones? no?
    – Alex
    el 6 abr. 2017 a las 21:51

2 respuestas 2

0

Tu código a mi me funciona, no se el porque te falla a ti, el div superior a ese ¿que medida de rejilla usa? Quizás es inferior al de los botones juntos y eso ocasiona que la solución de bootstrap sea colocar un elemento abajo y uno arriba.

Acá te dejo el código como lo uso en mi aplicación y me funciona perfectamente:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm-12 col-xs-12">
	<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-step-backward"></span>&nbsp;Anterior</button>
	<button class="btn btn-default" type="button">Siguiente&nbsp;<span class="glyphicon glyphicon-step-forward"></span></button>
</div>

NOTA: Si esto no te da solución, por favor, coloca el código completo de tu web para probar completamente la funcionalidad.

Actualización 1:

Aca el código con btn-group probado y funcionando:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
   <div class="col-md-9 col-md-offset-9 col-xs-12 text-right" >
     <div class="btn-group" role="group">
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-step-backward"></span>&nbsp;Anterior</button>
        <button class="btn btn-default" type="button">Siguiente&nbsp;<span class="glyphicon glyphicon-step-forward"></span></button>
     </div>
   </div>
</div>

Actualización 2: Tu problema esta en que no estas definiendo el grib de móviles para ello indicas el xs

col-xs-1 al col-xs-12
6
  • Hola Pablo, primero gracias por contestar, sin agrupar los botones con btn-group si se alinean horizontalmente. Mi duda es si es posible agrupándolos. el 31 ene. 2017 a las 16:56
  • De nada, preguntaste arriba si se podían agrupar para móviles. Y eso respondí. Modifica tu pregunta sino está bien clara. Yo utilizo los btn-group. Dame un chance y te digo.
    – bypabloc_
    el 31 ene. 2017 a las 17:09
  • @GabrielDivenuto actualizado
    – bypabloc_
    el 31 ene. 2017 a las 17:17
  • Pablo sabés que así lo tenía, pero sin especificarle col-xs-12. Se visualizan horizontalmente, es raro ya que no he cambiado nada. el 31 ene. 2017 a las 18:01
  • Te agradezco Pablo. el 31 ene. 2017 a las 18:02
0

Utiliza display: flex en el contenedor de botones

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-3 col-md-offset-9 text-right">
        <div class="btn-group d-flex w-100" role="group">
            <button class="btn btn-default w-100" type="button"><span class="glyphicon glyphicon-step-backward"></span>&nbsp;Anterior</button>
            <button class="btn btn-default w-100" type="button">Siguiente&nbsp;<span class="glyphicon glyphicon-step-forward"></span></button>
        </div>
    </div>
</div>

2
  • 1
    Gracias Samir. Tardé en contestar pero volví a utilizar este sitio ahora que empecé con la versión 4 de bootstrap. el 19 abr. 2018 a las 17:02
  • de nada, aproveche y actualice el codigo el 20 abr. 2018 a las 3:49

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.