Я не сталкивался с этим раньше, и мне очень трудно найти решение. Если в начальной загрузке есть столбец, равный medium:
<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>
Выравнивание текста работает отлично:
Но при создании столбца, равного очень маленькому, вот так:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
Тогда выравнивание текста больше не работает:
Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как мне кажется. У меня никогда не было этой проблемы, так как мой текст всегда выравнивался в прошлом с xs. Любая помощь будет принята с благодарностью. Вот мой полный код:
<!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-*
больше не существует в последней версии v4, поэтому вы видите это.col-xs-12
Не имеет ширину набора 100% , как вашcol-md-12
. Проверьте DevTools, чтобы увидеть все и увидеть это PullОтветы:
col-xs-*
были сброшены в Bootstrap 4 в пользуcol-*
.Замените
col-xs-12
на,col-12
и он будет работать как положено.Также примечание
col-xs-offset-{n}
было замененоoffset-{n}
в v4.источник
Я просто удивился, почему
col-xs-6
у меня это не сработало, но потом я нашел ответ в документации по Bootstrap 4. Префикс класса для сверхмалых устройств теперь естьcol-
в предыдущих версияхcol-xs
.https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 отбросил все
col-xs-*
классы, так что используйтеcol-*
вместо этого. Напримерcol-xs-6
заменил наcol-6
.источник
Вы можете сделать это, если хотите использовать старый синтаксис (или не хотите переписывать каждый шаблон)
источник
Они отказались от XS, потому что Bootstrap считается мобильным инструментом разработки. По умолчанию это xs, поэтому его не нужно определять.
источник
В Bootstrap 4.3 col-xs- {value} заменяется на col- {value}
Нет изменений в sm, md, lg, xl, остается неизменным.
.col- {значение}
.col-sm- {значение}
.col-md- {значение}
.col-lg- {значение}
.col-xl- {значение}
источник
Bootstrap 4 Grid col-xs- * класс.
источник