`col-xs- *` arbeitet nicht in Bootstrap 4

Ich habe das vorher nicht gesehen, und ich habe eine sehr harte Zeit versucht, die Lösung zu finden. Wenn wie so eine Spalte gleich Medium in Bootstrap mit:`col-xs- *` arbeitet nicht in 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>

Der text-align funktioniert:

Aber wenn so dass die Spalte gleich extra klein wie so:

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

Dann wird der text-align funktioniert nicht mehr:

gibt es eine Bootstrap-co ncept, dass ich nicht verstehe, oder ist das tatsächlich ein Fehler, wie ich denke, dass es ist. Ich hatte dieses Problem nie, da mein Text in der Vergangenheit immer mit xs ausgerichtet wurde. Jede Hilfe würde sehr geschätzt werden. Hier ist meine komplette Code:

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

Quelle

2017-01-22 YoungCoder

'col-xs- *' existiert nicht mehr in der neuesten v4-Version, deshalb sehen Sie dies. Die 'col-xs-12' hat keine Breite von 100% wie Ihre' col-md-12'. Überprüfen Sie DevTools, um alles zu sehen und zu sehen [Ziehen] (https://github.com/twbs/bootstrap/pull/20934) – vanburen

col-xs-* haben in Bootstrap 4 zugunsten von col-* fallen gelassen worden.

Ersetzen Sie col-xs-12 durch col-12 und es wird wie erwartet funktionieren.

Beachten Sie auch col-xs-offset-{n} wurden ersetzt durch offset-{n} in v4.

Quelle

2017-01-22 19:35:50

Niemals würde sogar davon denken/bekannt davon! Ich danke dir sehr. – YoungCoder

Überprüfen Sie immer [docs] (https://v4-alpha.getbootstrap.com/layout/grid/#grid-options). Glückliche Kodierung! ::} <(((*> :: –

Dies ist nicht etwas, was Sie normalerweise Dokumente überprüfen würden. Ich war überall in der Dokumentation und habe das auch vermisst. Ich hatte über zwei bs4-Site-Migrationen gedacht, dass col für generische war und col-xs spezifisch sein würden, aber im Nachhinein macht das keinen Sinn, da xs und up zuerst mobil sind, dann generisch (Standard). Danke für die Erinnerung, ich glaube, ich habe das während meiner letzten Migration überflogen, war aber auf diesem hier festgefahren. – blamb

Ich frage mich nur, warum col-xs-6 nicht für mich funktioniert dann fand ich in Bootstrap-4-Dokumentation. Klasse Präfix für Extras kleines Gerät ist jetzt "COL-" in der vorherige Version, es wäre "col-xs"

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

Bootstrap4 Dropped all "col-xs- " Klassen verwenden "COL-" statt . , d. H. Col-xs-6 wird durch col-6 ersetzt.

Quelle

2017-05-25 10:39:50

`col-xs- *` arbeitet nicht in Bootstrap 4

Antwort

Verwandte Themen