Nie spotkałem się z tym wcześniej i bardzo ciężko mi jest znaleźć rozwiązanie. Gdy kolumna jest równa medium w bootstrapie, tak:
<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>
Wyrównanie tekstu działa dobrze:
Ale kiedy sprawi się, że kolumna będzie bardzo mała:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
Wtedy wyrównywanie tekstu już nie działa:
Czy jest jakaś koncepcja bootstrap, której nie rozumiem, czy w rzeczywistości jest to błąd, tak jak myślę. Nigdy nie miałem tego problemu, ponieważ mój tekst zawsze był wyrównany w przeszłości z xs. Każda pomoc byłaby bardzo mile widziana. Oto mój pełny kod:
<!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>
html
css
twitter-bootstrap
twitter-bootstrap-4
text-alignment
YoungCoder
źródło
źródło
col-xs-*
nie istnieje już w najnowszej wersji v4, dlatego to widzisz.col-xs-12
Nie mają szerokość zestawu 100% jak twójcol-md-12
. Sprawdź DevTools, aby zobaczyć wszystko i zobaczyć to PullOdpowiedzi:
col-xs-*
zostały usunięte w Bootstrap 4 na korzyśćcol-*
.Wymień
col-xs-12
sięcol-12
i będzie działać zgodnie z oczekiwaniami.Uwaga
col-xs-offset-{n}
zostały również zastąpioneoffset-{n}
w v4.źródło
Zastanawiałem się tylko, dlaczego
col-xs-6
u mnie nie działa, ale wtedy znalazłem odpowiedź w dokumentacji Bootstrap 4. Prefiks klasy dla bardzo małych urządzeń jest teraz takicol-
, jak w poprzednich wersjachcol-xs
.https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 porzucił wszystkie
col-xs-*
klasy, więc użyjcol-*
zamiast tego. Na przykładcol-xs-6
zastąpiony przezcol-6
.źródło
możesz to zrobić, jeśli chcesz użyć starej składni (lub nie chcesz przepisać każdego szablonu)
źródło
Porzucili XS, ponieważ Bootstrap jest uważany za narzędzie programistyczne dla urządzeń mobilnych. Domyślnie jest traktowany jako xs, więc nie trzeba go definiować.
źródło
W Bootstrap 4.3 , col-xs- {wartość} jest zastępowane przez col- {wartość}
Nie ma zmiany w sm, md, lg, xl pozostaje taka sama.
.col- {wartość}
.col-sm- {wartość}
.col-md- {wartość}
.col-lg- {wartość}
.col-xl- {wartość}
źródło
Bootstrap 4 Grid, klasa col-xs- *.
źródło