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.