web-dev-qa-db-ja.com

`col-xs- *`がブートストラップ4で動かない

私はこれまで遭遇したことがないので、解決策を見つけるのに非常に苦労しています。次のように、ブートストラップでmediumと等しい列があるとします。

<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はうまくいきます： enter image description here

しかし、このように列を余分に小さくすると、次のようになります。

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

それからtext-alignはもはや機能しません： enter image description here

私が理解していないというブートストラップの概念があるのでしょうか、それとも私が思うようにこれは間違いです。私のテキストは過去にはいつも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>
htmlcsstwitter-bootstraptwitter-bootstrap-4text-alignment
109
YoungCoder

ブートストラップ4では、col-xs-*がcol-*のために削除されました。

col-xs-12をcol-12に置き換えると、期待どおりに機能します。

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

302
Andrei Gheorghiu

どうしてcol-xs-6が私にはうまくいかなかったのでしょうか。でも、Bootstrap 4のドキュメントで答えを見つけました。以前のバージョンではcol-であったのに対し、特別小型デバイスのクラスプレフィックスはcol-xsになりました。

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

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

20
Sabir Hussain