`col-xs- *`がBootstrap 4で機能しない

169

私はこれに遭遇したことがなく、解決策を見つけるのに非常に苦労しています。ブートストラップの列が中程度の場合、次のようになります。

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

text-alignは正常に機能します。 ここに画像の説明を入力してください

しかし、列を次のように極端に小さくすると、

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

その後、text-alignは機能しなくなります。 ここに画像の説明を入力してください

私が理解していないいくつかのブートストラップの概念はありますか、またはこれは実際に私が思うようなエラーです。私のテキストは常にxsと常に一致しているため、この問題は一度もありませんでした。どんな助けでも大歓迎です。これが私の完全なコードです：

<!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
ソース
7
col-xs-*最新のv4リリースには存在しないため、これが表示されます。のcol-xs-12ように100％の幅セットはありませんcol-md-12。DevToolsですべてを確認し、このプル
— vanburen 2017年

回答:

436

col-xs-* Bootstrap 4で削除されました。 col-*。

交換するcol-xs-12とcol-12、期待どおりに動作します。

また、v4ではにcol-xs-offset-{n}置き換えられましoffset-{n}た。

— タオ
ソース
8
これについては考えたことも知らないこともありません。どうもありがとうございます。
— YoungCoder 2017年
12
常にドキュメントを確認してください。幸せなコーディング！::} <（（（*> ::
— tao
8
これは通常、ドキュメントをチェックするものではありません。私はすべてのドキュメントの中にいて、これも逃しました。私は、今のbs4サイトの2回以上の移行で、colは総称的で、col-xsは特定のものだと思っていましたが、後から考えると、これは意味がありません。リマインダーをありがとう、私は最後の移行中にそれをすくい取ったと思うが、これではこれにこだわっていた。
— blamb 2017年
1
Andreiを介して1つのこと。ドロップされたのは単なる「xs」ですか、それとも他にもありますか？
— Funk Forty Niner、2018
2
v3とv4の間で何が変更されたかについて、この回答をお読みください。）また、そうすることに決めた場合は、ツールへのリンクもご覧ください。これは簡単な作業ではなく、私見ではクリーンなテンプレートで作業し、マークアップを変更するよりもphpを挿入する方が簡単です。
— tao
21

なぜcol-xs-6私にとってうまくいかなかったのか疑問に思いましたが、Bootstrap 4のドキュメントで答えを見つけました。極小デバイスのクラスプレフィックスcol-は、以前のバージョンではそのままでしたcol-xs。

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

Bootstrap 4はすべてのcol-xs-*クラスを削除したので、col-*代わりに使用してください。たとえば、にcol-xs-6置き換えられcol-6ます。

— サビル・フセイン
ソース
2

古い構文を使用したい場合（またはすべてのテンプレートを書き直したくない場合）、これを行うことができます。

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

Bootstrapはモバイルファーストの開発ツールと見なされているため、XSは廃止されました。デフォルトはxsと見なされるため、定義する必要はありません。

— SMWalker
ソース
-1

ブートストラップ4グリッドcol-xs- *クラス。

ブートストラップ4では、グリッドクラスはビューごとに、または同じ場合でも異なります。

.col-xs- *クラスを使用する場合。

したがって、このクラスはモバイルビューで機能します。

違いを確認するには、以下のコードを試して違いを確認してください。次に、このクラスをコードで使用します。

<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>
— バーティパルマー
ソース
col-xsはBootstrap 4で削除されます
— Wariored
：、それを見て、リンクしていてくださいbitdegree.org/learn/... *％20IN％20your％20code。
— bharti parmar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.