vertical right horizontal div color bootstrap align html css twitter-bootstrap twitter-bootstrap-4 text-alignment

html - right - text-xs-center bootstrap 4



`col-xs-*` no funciona en Bootstrap 4 (2)

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 es col-xs mientras que en las versiones anteriores era col-xs .

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

Bootstrap 4 descartó todas las clases col-xs-* , así que use col-* lugar. Por ejemplo, col-xs-6 reemplazado por col-6 .

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>


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

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

También tenga en cuenta que col-xs-offset-{n} fueron reemplazados por offset-{n} en v4.