`col-xs- *` nie działa w Bootstrap 4

169

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>

— YoungCoder
źródło

7

col-xs-*nie istnieje już w najnowszej wersji v4, dlatego to widzisz. col-xs-12Nie mają szerokość zestawu 100% jak twój col-md-12. Sprawdź DevTools, aby zobaczyć wszystko i zobaczyć to Pull

— vanburen

436

col-xs-*zostały usunięte w Bootstrap 4 na korzyść col-*.

Wymień col-xs-12się col-12i będzie działać zgodnie z oczekiwaniami.

Uwaga col-xs-offset-{n}zostały również zastąpione offset-{n}w v4.

— tao
źródło

8

Nigdy nawet nie pomyślał / nie wiedział o tym! Dziękuję bardzo.

— YoungCoder

12

Zawsze sprawdzaj dokumenty . Miłego kodowania! ::} <(((*> ::

— tao

8

To nie jest coś, co normalnie sprawdzałbyś w dokumentach. Byłem na wszystkich doktorach i też za tym tęskniłem. Pomyślałem, że po dwóch migracjach witryn bs4 teraz, że col byłby ogólny, a col-xs byłby specyficzny, jednak z perspektywy czasu nie ma to sensu, ponieważ bycie mobilnym najpierw, xs i wyżej jest generyczne (domyślne). Dzięki za przypomnienie, myślę, że przejrzałem to podczas mojej ostatniej migracji, ale utknąłem na tym.

— blamb

1

Jedna rzecz choć Andrei; czy to po prostu „xs”, które zostało usunięte, czy są też inne?

— Funk Forty Niner

2

Przeczytaj tę odpowiedź, aby dowiedzieć się, co się zmieniło między wersją 3 i 4 ), a także link do narzędzia, jeśli zdecydujesz się pójść tą drogą. Nie jest to łatwe zadanie i IMHO łatwiej jest pracować nad czystym szablonem i po prostu wstawić php niż zmienić znaczniki.

— tao

21

Zastanawiałem się tylko, dlaczego col-xs-6u mnie nie działa, ale wtedy znalazłem odpowiedź w dokumentacji Bootstrap 4. Prefiks klasy dla bardzo małych urządzeń jest teraz taki col-, jak w poprzednich wersjach col-xs.

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

Bootstrap 4 porzucił wszystkie col-xs-*klasy, więc użyj col-*zamiast tego. Na przykład col-xs-6zastąpiony przez col-6.

— Sabir Hussain
źródło

2

możesz to zrobić, jeśli chcesz użyć starej składni (lub nie chcesz przepisać każdego szablonu)

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

— wiwolavida
źródło

2

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ć.

— SMWalker
źródło

1

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ść}

— Dordże Karma
źródło

-1

Bootstrap 4 Grid, klasa col-xs- *.

W bootstrap 4 klasy grid są różne dla różnych widoków lub dla tego samego.

Jeśli chcesz użyć klasy .col-xs- *.

Tak więc ta klasa działa w widoku mobilnym.

Aby zobaczyć różnicę, wypróbuj poniższy kod i zobacz różnicę. Następnie użyj tej klasy w swoim kodzie.

<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
źródło

col-xs jest upuszczany w Bootstrap 4

— Wariored

proszę, spójrz na to link: bitdegree.org/learn/ ... *% 20in% 20your% 20code.

— bharti parmar