0

tengo la siguiente estructura:

<div class="container">
 <div class="row">
                            <div class="col-md-4 col-sm-6">
                            </div>
                            <div class="col-md-4 col-sm-6">
                            </div>
                            <div class="col-md-4 col-sm-6">
                            </div>
                        </div>
                    </div>

El problema es que en dispositivos de escritorio no centra los elementos si son menos de 3. Quisiera que se centran aunque sea solo un elemento.

3
  • Podrías, poner una captura de pantalla para ver de que forman queda de como tu lo estas haciendo el 22 ene. 2018 a las 15:04
  • 1
    El total de columnas es 12 y no 18 como lo estas dando a la clase col-sm-6 siempre tienen que sumar 12
    – Kevin
    el 22 ene. 2018 a las 15:15
  • Teniendo 3 divs estos se centran, el problema es cuando solo coloco 2 divs, queda el espacio para otro div. Lo solucioné añadiéndole la clase col-md-offset-x, donde x es la cantidad de columnas que me sobran. el 22 ene. 2018 a las 15:26

1 respuesta 1

2

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.red {background:red;color:white;}
.blue {background:blue;color:white;}
.green {background:green;color:white;}
/** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
</style>
</head>
<body>
<div class="container">
 <div class="row m-auto">
                            <div class="col-md-4 col-sm-4 text-center m-auto red">
                            <p>Contenido</p>
                            </div>
                            <div class="col-md-4 col-sm-4 text-center m-auto green">
                            <p>Contenido 2</p>
                            </div>
                            <div class="col-md-4 col-sm-4 text-center m-auto blue">
                            <p>Contenido 3</p>
                            </div>
                        </div>
                    </div>
</body>
</html>

Otra opción es utilizar m-auto (margin: 0 auto):

   <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
    .red {background:red;color:white;}
    .blue {background:blue;color:white;}
    .green {background:green;color:white;}
    /** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row">
       <div class="col-md-4 m-auto blue">
          Contenido
       </div>
       <div class="col-md-4 m-auto red">
         Contenido 2
       </div>
      </div>
    </div>
 </body>
 </html>

La otra solución es la del offset-md-x

   <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
    .red {background:red;color:white;}
    .blue {background:blue;color:white;}
    .green {background:green;color:white;}
    /** siempre recomiendo tener una clase con fondos resaltantes para visualizar mejor lo que uno quiere lograr o arreglar */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row">
       <div class="col-md-4 offset-md-2 blue">
          Contenido
       </div>
       <div class="col-md-4 red">
         Contenido 2
       </div>
      </div>
    </div>
 </body>
 </html>

Bootstrap posee clases de margines y paddings, así también como centrado de texto.

Agregue esas clases con colores y linkie el css de bootstrap 4.0 para probarlo directamente aquí.

Ya que bootstrap es responsivo y al ejecutarlo en la ventana que es de unos aproximados 600-700px de largo, se va a posicionar diferente.

Más info sobre el "Grid System" de Bootstrap.

6
  • La clase text-center la uso solo para centrar el contenido de los divs, aquí lo que buscaba es centrar los divs. si te fijas en ese ejemplo que me colocas, si le quitas un div, vas a ver que queda un espacio al final. Lo solucioné añadiéndole la clase col-md-offset-x, donde x es la cantidad de columnas que me sobran. el 22 ene. 2018 a las 15:29
  • Siempre quedara un espacio ya que le estas dando en col-md-4 el total de 4 y en bootstrap siempre entre columnas tiene que dar 12. Que ocuparia el "width:100%" de la pantalla. Has probado "m-auto" ? puede que al sobrar un espacio en blanco, colocando m-auto se centren los 2 divs.
    – Juan
    el 22 ene. 2018 a las 15:31
  • Si, ya lo probé y queda igual. Lo unico que me funcionó fue lo del offset. el 22 ene. 2018 a las 15:38
  • Buenisimo, edite mi respuesta. Agregue dos opciones, la del margin auto y la que has nombrado del offset-x. Tambien deje el link de la guia de Bootstrap para más info sobre el sistema de cuadricula de bs.
    – Juan
    el 22 ene. 2018 a las 15:49
  • Excelente! Gracias!!! el 22 ene. 2018 a las 15:56

Tu Respuesta

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

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