'col-xs - *' не работает в Bootstrap 4

Я не сталкивался с этим раньше, и мне очень трудно найти решение. При наличии столбца, равного medium в bootstrap, например:



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


выравнивание текста работает нормально:
enter image description here



но при создании столбца, равного extra small вот так:



 <div class="container">

      <div class="row">

          <div class="col-xs-12 text-center">

              <h1>vicki williams</h1>

          </div>

      </div>

  </div>


тогда текст-выравнивание больше не работает:
enter image description here



есть ли какая-то концепция bootstrap, которую я не понимаю, или это на самом деле ошибка, как я думаю это. У меня никогда не было этой проблемы, так как мой текст всегда выравнивался в прошлом с 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>
659   2  

2 ответов:

col-xs-* были отброшены в Bootstrap 4 в пользу col-*.

заменить col-xs-12 С col-12 и оно будет работать, как ожидалось.

также Примечание!--4--> заменить offset-{n} в v4.

190  
2017-01-28 02:13:12

Я просто удивился, почему col-xs-6 не работает для меня, но затем я нашел ответ в документации Bootstrap 4. Префикс класса для сверхмалых устройств теперь col- в то время как в предыдущих версиях он был col-xs.

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

Bootstrap 4 сбросил все col-xs-* классы, так что используйте . Например col-xs-6 заменить на col-6.

14  
2018-05-16 16:21:35

Comments

    Ничего не найдено.
Click here to cancel reply.