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

Я не сталкивался с этим раньше, и мне очень трудно найти решение. При наличии столбца равной среды в начальной загрузки, как так:`col-xs- *` не работает в 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>

Текст-Align отлично работает:

Но при создании столбца равно особо малого так:

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

После этого текст-выровнять больше не работает:

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

источник

2017-01-22 YoungCoder

'col-xs- *' больше не существует в последней версии v4, поэтому вы видите это. 'Col-xs-12' не имеет ширины, равной 100%, как ваш' col-md-12'. Проверьте DevTools, чтобы увидеть все и увидеть это [Pull] (https://github.com/twbs/bootstrap/pull/20934) – vanburen

col-xs-* были сняты в Bootstrap 4 в пользу col-*.

Замените col-xs-12 на col-12 и он будет работать должным образом.

Также примечание col-xs-offset-{n} было заменено на offset-{n} в v4.

источник

2017-01-22 19:35:50

Никогда даже не думал об этом! Огромное спасибо. – YoungCoder

Всегда проверяйте [docs] (https://v4-alpha.getbootstrap.com/layout/grid/#grid-options). Счастливое кодирование! ::} <(((*> :: –

Это не то, что вы обычно проверяете для документов. Я был во всех документах и пропустил это тоже. Я подумал, что через две миграции сайта bs4 этот col был для общего типа, а col-xs был бы конкретным, однако в ретроспективе это не имеет смысла, потому что, будучи мобильным первым, xs и up являются универсальными (по умолчанию). Спасибо за напоминание, я думаю, что сделал это во время моей последней миграции, но застрял в этом на этом. – blamb

Мне просто интересно, почему col-xs-6 не собирается работать для меня, а затем я нашел в документации для начальной загрузки. Класс Приставка для дополнительной миниатюрного устройства теперь «коллектив-» в предыдущей версии она была «Col-хз»

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

Bootstrap4 брошено все «Col-xs- » классы используют «коллектив-» вместо , т. Е. Col-xs-6 заменен на col-6.

источник

2017-05-25 10:39:50

ответ

Смежные вопросы