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

的文本對齊工作正常：

但使列等於額外的小像這樣的時候：

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

然後文本對齊不再起作用：

是否有一些bootstrap 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'沒有象你的'col-md-12'那樣寬度設置爲100％。查看DevTools查看所有內容並查看此內容[Pull]（https://github.com/twbs/bootstrap/pull/20934） – vanburen

col-xs-*一直贊成col-*在引導4下降。

將col-xs-12替換爲col-12，它將按預期工作。

另請注意col-xs-offset-{n}在第4版中被替換爲offset-{n}。

來源

2017-01-22 19:35:50

永遠不會想到/知道這件事！非常感謝。 – YoungCoder

總是檢查[文檔]（https://v4-alpha.getbootstrap.com/layout/grid/#grid-options）。快樂的編碼！ ::} <(((*> :: –

這通常不會檢查文檔。我全都過了文檔，也錯過了這個。我曾想過，現在有兩個bs4站點遷移，col是通用的，col-xs是特定的，但事後看來這沒有意義，因爲首先移動，xs和up是通用的（默認）。感謝提醒，我想我在我最後一次遷移期間做了一些改動，但是在這個問題上一直停留在此。 – blamb

我只是想知道，爲什麼col-xs-6不會爲我工作，然後我在bootstrap-4文檔中找到。類前綴的超小型設備現在是「同事」在以前的版本，這是「COL-XS」

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

Bootstrap4拋棄了所有的「COL-XS-」類使用「同事」，而不是。即col-xs-6被col-6替換。

來源

2017-05-25 10:39:50

`col-xs- *`不能在Bootstrap中工作4

回答

相關問題