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

168

Ich bin noch nie darauf gestoßen, und es fällt mir sehr schwer, die Lösung zu finden. Wenn eine Spalte im Bootstrap wie folgt gleich mittel ist:

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

Die Textausrichtung funktioniert einwandfrei:

Aber wenn Sie die Spalte so klein wie extra machen:

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

Dann funktioniert die Textausrichtung nicht mehr:

Gibt es ein Bootstrap-Konzept, das ich nicht verstehe, oder ist dies tatsächlich ein Fehler, wie ich denke? Ich hatte dieses Problem noch nie, da mein Text in der Vergangenheit immer mit xs übereinstimmt. Jede Hilfe wäre sehr dankbar. Hier ist mein vollständiger 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>

— YoungCoder
quelle

7

col-xs-*existiert in der neuesten Version 4 nicht mehr, deshalb sehen Sie dies. Der col-xs-12hat keine Breite von 100% wie Ihre col-md-12. Überprüfen Sie DevTools, um alles zu sehen und diese Pull

— vanburen

432

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

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

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

— tao
quelle

8

Niemals hätte ich daran gedacht / gewusst! Ich danke dir sehr.

— YoungCoder

12

Überprüfen Sie immer die Dokumente . Viel Spaß beim Codieren! ::} <(((*> ::

— Tao

8

Dies ist nicht etwas, auf das Sie normalerweise Dokumente überprüfen würden. Ich war überall in der Dokumentation und habe dies auch verpasst. Ich hatte über zwei bs4-Site-Migrationen hinweg gedacht, dass col für generisch ist und col-xs spezifisch ist. Im Nachhinein macht dies jedoch keinen Sinn, da xs und höher generisch sind (Standard), da sie zuerst mobil sind. Vielen Dank für die Erinnerung, ich glaube, ich habe das während meiner letzten Migration überflogen, war aber bei dieser hier festgefahren.

— Blamb

1

Eine Sache obwohl Andrei; Ist es nur "xs", das fallen gelassen wurde, oder gibt es auch andere?

— Funk Forty Niner

2

Bitte lesen Sie diese Antwort darüber, was sich zwischen Version 3 und Version 4 geändert hat .) Und auch einen Link zu einem Tool, falls Sie sich für diesen Weg entscheiden sollten. Es ist keine leichte Aufgabe und meiner Meinung nach ist es einfacher, an einer sauberen Vorlage zu arbeiten und nur das PHP einzufügen, als das Markup zu ändern.

— Tao

21

Ich habe mich nur gefragt, warum col-xs-6es bei mir nicht funktioniert hat, aber dann habe ich die Antwort in der Bootstrap 4-Dokumentation gefunden. Das Klassenpräfix für extra kleine Geräte ist jetzt so, wie es col-in den vorherigen Versionen war col-xs.

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

Bootstrap 4 hat alle col-xs-*Klassen gelöscht , verwenden Sie col-*stattdessen. Zum Beispiel col-xs-6ersetzt durch col-6.

— Sabir Hussain
quelle

2

Sie können dies tun, wenn Sie die alte Syntax verwenden möchten (oder nicht jede Vorlage neu schreiben möchten).

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

— wiwolavida
quelle

2

Sie haben XS fallen gelassen, weil Bootstrap als Mobile-First-Entwicklungstool gilt. Die Standardeinstellung wird als xs betrachtet und muss daher nicht definiert werden.

— SMWalker
quelle

1

In Bootstrap 4.3 wird col-xs- {value} durch col- {value} ersetzt

Es gibt keine Änderung in sm, md, lg, xl bleibt gleich.

.col- {Wert}
.col-sm- {Wert}
.col-md- {Wert}
.col-lg- {Wert}
.col-xl- {Wert}

— Dorjee Karma
quelle

-1

Bootstrap 4 Grid col-xs- * Klasse.

In Bootstrap 4 unterscheiden sich die Rasterklassen für unterschiedliche Ansichten oder für dieselbe.

Wenn Sie die .col-xs- * -Klasse verwenden möchten.

Diese Klasse arbeitet also für die mobile Ansicht.

Um den Unterschied zu sehen, können Sie diesen Code unten ausprobieren und den Unterschied sehen. Verwenden Sie dann diese Klasse in Ihrem Code.

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

col-xs wird in Bootstrap 4

— Wariored

Bitte schauen Sie sich den Link an: bitdegree.org/learn/… *% 20in% 20your% 20code.

— Bharti Parmar