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

Nie spotkałem się z tym wcześniej i bardzo ciężko próbuję znaleźć rozwiązanie. Gdy posiadające kolumny równą medium w bootstrap tak:`col-xs- *` nie działa w Bootstrap 4

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

Tekst-align działa dobrze:

Ale przy podejmowaniu kolumnę równa dodatkowy mały tak:

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 text-center"> 
       <h1>vicki williams</h1> 
      </div> 
     </div> 
    </div>

Następnie wyrównywanie tekstu nie działa:

Czy jest jakiś bootstrap Chodzi o to, że nie rozumiem, czy w rzeczywistości jest to błąd, jak sądzę. Nigdy nie miałem tego problemu, ponieważ mój tekst zawsze był dopasowany w przeszłości do xs. Każda pomoc będzie wielce ceniona. 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>

Źródło

2017-01-22 YoungCoder

'col-xs- *' nie istnieje już w najnowszym wydaniu v4, dlatego właśnie to widzisz. Kolumna 'col-xs-12' nie ma zestawu szerokości równego 100%, tak jak twojego' col-md-12'. Sprawdź DevTools, aby zobaczyć wszystko i zobaczyć to [Pull] (https://github.com/twbs/bootstrap/pull/20934) – vanburen

col-xs-* zostały wycofane w Bootstrap 4 na korzyść col-*.

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

Również uwaga col-xs-offset-{n} została zastąpiona przez offset-{n} w wersji 4.

Źródło

2017-01-22 19:35:50

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

Zawsze sprawdź [dokumenty] (https://v4-alpha.getbootstrap.com/layout/grid/#grid-options). Szczęśliwe kodowanie! ::} <(((*> :: –

To nie jest coś, na co zwykle sprawdzasz dokumenty. Byłem w całym docs i tęskniłem za tym też. Myślałem, że teraz, po dwóch migracjach witryny bs4 teraz, col był dla generic, a col-xs byłyby specyficzne, jednak z perspektywy czasu nie ma to sensu, ponieważ będąc najpierw mobilnym, xs i up są ogólne (domyślnie). Dzięki za przypomnienie, myślę, że przeszukałem to podczas mojej ostatniej migracji, ale utknąłem na tym na tym. – blamb

Po prostu zastanawiam się, dlaczego col-xs-6 nie działa dla mnie, a następnie znalazłem w dokumentacji bootstrap-4. Prefiks dla klasy ekstra małego urządzenia są teraz „koledzy” w poprzedniej wersji było „Col-xs”

https://v4-alpha.getbootstrap.com/layout/grid/#grid-options

Bootstrap4 Wypada wszystko „Col-xs- ” klas użyć „koledzy” zamiast . tj. Col-xs-6 zastąpiony przez col-6.

Źródło

2017-05-25 10:39:50

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

Odpowiedz

Powiązane problemy