1

EL problema es que en mi navegador no se ve correctamente los divs col-xs. No obstante aquí si se ve bien. Dejo una foto: introducir la descripción de la imagen aquí

HTML

<!doctype html>
<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <meta name"viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container">

    <div class="row">
      <div class="col-lg-4" style="background-color:#aaa">
        <h1>Columna 1</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-lg-4" style="background-color:#bbb">
        <h1>Columna 2</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-lg-4" style="background-color:#ccc">
        <h1>Columna 3</h1>
        <p>Prueba de Bootstrap</p>
      </div>
    </div>

     <hr>

    <div class="row">
      <div class="col-md-4" style="background-color:#aaa">
        <h1>Columna 1</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-md-4" style="background-color:#bbb">
        <h1>Columna 2</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-md-4" style="background-color:#ccc">
        <h1>Columna 3</h1>
        <p>Prueba de Bootstrap</p>
      </div>
    </div>

     <hr>

    <div class="row">
      <div class="col-sm-4" style="background-color:#aaa">
        <h1>Columna 1</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-sm-4" style="background-color:#bbb">
        <h1> Columna 2</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-sm-4" style="background-color:#ccc">
        <h1>Columna 3</h1>
        <p>Prueba de Bootstrap</p>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-xs-4" style="background-color:#aaa">
        <h1>Columna 1</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-xs-4" style="background-color:#bbb">
        <h1> Columna 2</h1>
        <p>Prueba de Bootstrap</p>
      </div>
      <div class="col-xs-4" style="background-color:#ccc">
        <h1>Columna 3</h1>
        <p>Prueba de Bootstrap</p>
      </div>
    </div>

  </div>
</body>
</html>

9
  • 2
    Aquí se muestra bien... cual navegador usas? Versiones? Haz limpiado el cache del navegador? .... Commented el 15 ago. 2017 a las 13:45
  • Que raro, borre chaché y además aqui se ve bien. No se que puede ser. Navegador: Google chrome Commented el 15 ago. 2017 a las 14:12
  • Puede ser por <hr> agrega uno despues de tu ultima columna Commented el 15 ago. 2017 a las 15:09
  • Lo agregue y tampoco funciono Commented el 15 ago. 2017 a las 15:14
  • 1
    Aquí ni siquiera tienes el css de bootstrap enlazado, no sé como puedes verlo bien. De cualquier forma si no se puede reproducir el error es complicado saber que pasa ¿Tú codigo es exactamente el mismo que has puesto aquí?
    – user7176
    Commented el 16 ago. 2017 a las 6:38

2 respuestas 2

7

El problema reside en las clases de grilla que estás usando para tus columnas. Las clases col-xs no funcionan para Bootstrap 4.

La versión 4.0 tiene opciones de grilla diferentes a las de la versión 3.x. Bootstrap 4 no cuenta con las clases col-xs- que tiene la versión 3.x para las pantallas de menor tamaño, pero sí cuenta con las clases col-, que cumplen el mismo propósito.

Eso si, debes tomar en cuenta, que las opciones de grilla tienen rangos de anchos de pantallas distintos entre versión y versión:

Bootstrap 4.0

  • col-: Anchos bajo 576px
  • col-sm-: Anchos entre 576px y 767px
  • col-md-: Anchos entre 768px y 991px
  • col-lg-: Anchos entre 992px y 1199px
  • col-xl-: Anchos de 1200px en adelante

Bootstrap 3.x

  • col-xs-: Anchos bajo 768px
  • col-sm-: Anchos entre 768px y 991px
  • col-md-: Anchos entre 992px y 1199px
  • col-lg-: Anchos de 1200px en adelante

Solución

Si estás usando Bootstrap 4, basta con reemplazar las clases col-xs- de tus columnas de la última fila, por las clases col-.

En este caso, col-xs-4 por col-4:

<div class="col-4" style="background-color:#aaa">
  <h1>Columna 1</h1>
  <p>Prueba de Bootstrap</p>
</div>

Tu fila quedaría así:

 <div class="row">
    <div class="col-4" style="background-color:#aaa">
      <h1>Columna 1</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-4" style="background-color:#bbb">
      <h1> Columna 2</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-4" style="background-color:#ccc">
      <h1>Columna 3</h1>
      <p>Prueba de Bootstrap</p>
    </div>
 </div>

Código completo

El código completo quedaría así:

  <div class="row">
    <div class="col-lg-4" style="background-color:#aaa">
      <h1>Columna 1</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-lg-4" style="background-color:#bbb">
     <h1>Columna 2</h1>
     <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-lg-4" style="background-color:#ccc">
     <h1>Columna 3</h1>
     <p>Prueba de Bootstrap</p>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-4" style="background-color:#aaa">
      <h1>Columna 1</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-md-4" style="background-color:#bbb">
      <h1>Columna 2</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-md-4" style="background-color:#ccc">
      <h1>Columna 3</h1>
      <p>Prueba de Bootstrap</p>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-sm-4" style="background-color:#aaa">
      <h1>Columna 1</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-sm-4" style="background-color:#bbb">
      <h1> Columna 2</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-sm-4" style="background-color:#ccc">
      <h1>Columna 3</h1>
      <p>Prueba de Bootstrap</p>
    </div>
 </div>

 <hr>

 <div class="row">
    <div class="col-4" style="background-color:#aaa">
      <h1>Columna 1</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-4" style="background-color:#bbb">
      <h1> Columna 2</h1>
      <p>Prueba de Bootstrap</p>
    </div>
    <div class="col-4" style="background-color:#ccc">
      <h1>Columna 3</h1>
      <p>Prueba de Bootstrap</p>
    </div>
 </div>

Y aquí lo puedes ver en acción.

Véase también

1

El código mas o menos debe de quedarte así, recuerda siempre considerar que versión de bootstarp estas usando.

<div class="row">
  <div class="col-xs-4 col-md-4" style="background-color:#aaa">
    <h1>Columna 1</h1>
    <p>Prueba de Bootstrap</p>
  </div>
  <div class="col-xs-4 col-md-4" style="background-color:#bbb">
    <h1> Columna 2</h1>
    <p>Prueba de Bootstrap</p>
  </div>
  <div class="col-xs-4 col-md-4" style="background-color:#ccc">
    <h1>Columna 3</h1>
    <p>Prueba de Bootstrap</p>
  </div>
</div>

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.