`col-xs- *` no funciona en Bootstrap 4

169

No me he encontrado con esto antes, y me está costando mucho tratar de encontrar la solución. Al tener una columna igual a media en bootstrap así:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

La alineación de texto funciona bien:

Pero al hacer la columna igual a extra pequeña así:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

Entonces la alineación de texto ya no funciona:

¿Hay algún concepto de bootstrap que no entiendo o es de hecho un error como creo que es? Nunca he tenido este problema, ya que mi texto siempre se ha alineado en el pasado con xs. Cualquier ayuda sería muy apreciada. Aquí está mi código completo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
fuente

77

col-xs-*ya no existe en la última versión v4, por eso estás viendo esto. El col-xs-12no tiene un conjunto de ancho del 100% como el tuyo col-md-12. Consulte DevTools para ver todo y ver este Pull

— vanburen

436

col-xs-*se han dejado caer en Bootstrap 4 a favor de col-*.

Reemplace col-xs-12con col-12y funcionará como se esperaba.

También nota col-xs-offset-{n}fueron reemplazados por offset-{n}en v4.

— tao
fuente

8

¡Nunca lo hubiera pensado / conocido de esto! Muchas gracias.

— YoungCoder

12

Siempre revisa los documentos . ¡Feliz codificación! ::} <(((*> ::

— tao

8

Esto no es algo que normalmente verificaría en los documentos. Estaba en todos los documentos y también me perdí esto. Pensé, en dos migraciones de sitios bs4 ahora, que col era genérico, y col-xs sería específico, sin embargo, en retrospectiva, esto no tiene sentido, porque al ser móvil primero, xs y superior es genérico (predeterminado). Gracias por el recordatorio, creo que lo leí durante mi última migración, pero me quedé estancado en esto.

— blamb

1

Una cosa, aunque Andrei; ¿Es solo "xs" lo que se ha eliminado, o hay otros también?

— Funk Forty Niner el

2

Lea esta respuesta sobre lo que cambió entre v3 y v4 .) Y también un enlace a una herramienta, en caso de que decida seguir ese camino. No es una tarea fácil y, en mi humilde opinión, es más fácil trabajar en una plantilla limpia e insertar el php que cambiar el marcado.

— tao

21

Me preguntaba por qué col-xs-6 no funcionó para mí, pero luego encontré la respuesta en la documentación de Bootstrap 4. El prefijo de clase para dispositivos extra pequeños ahora está col-en las versiones anteriores col-xs.

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4 eliminó todas las col-xs-*clases, así que úsalas col-*en su lugar. Por ejemplo col-xs-6reemplazado por col-6.

— Sabir Hussain
fuente

2

podría hacer esto, si desea utilizar la sintaxis anterior (o no desea reescribir cada plantilla)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
fuente

2

Dejaron XS porque Bootstrap se considera una herramienta de desarrollo móvil primero. Su valor predeterminado se considera xs, por lo que no es necesario definirlo.

— SMWalker
fuente

1

En Bootstrap 4.3 , col-xs- {value} se reemplaza por col- {value}

No hay cambio en sm, md, lg, xl sigue siendo el mismo.

.col- {value}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value}

— Dorjee Karma
fuente

-1

Bootstrap 4 Grid col-xs- * clase.

En bootstrap 4 las clases de cuadrícula son diferentes para diferentes vistas o para lo mismo.

Si quieres usar la clase .col-xs- *.

Entonces, esta clase está funcionando para la vista móvil.

Para ver la diferencia, puede probar este código a continuación y ver la diferencia. Luego, usa esta clase en tu código.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— Bharti Parmar
fuente

col-xs se cae en Bootstrap 4

— Advertencia

por favor, eche un vistazo a este enlace: bitdegree.org/learn/… *% 20in% 20your% 20code.

— Bharti Parmar