`sütun-xs- *` Bootstrap 4 Bunu daha önce karşılaşmadım

çalışan ve ben çözüm bulmaya çalışan bir çok zorlanıyorum değil. şöyle bootstrap ortama eşit bir sütun sahip olduğunda:`sütun-xs- *` Bootstrap 4 Bunu daha önce karşılaşmadım

<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 çalışıyor:

Ama şimdiye gibi ekstra küçük eşit sütun yaparken:

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

Sonra metin hizalaması artık çalışmıyor:

Bazı bootstrap co var mı Anladığımdan emin değilim ya da aslında bu gibi bir hata olduğunu. Metnim her zaman geçmişte xs ile hizalı olduğu için bu konuya hiç sahip değildim. Herhangi bir yardım büyük takdir edilecektir.

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

kaynak

2017-01-22 YoungCoder

'col-xs- *' artık en son v4 sürümünde mevcut değil, bu yüzden bunu görüyorsunuz. Col-xs-12' 'col-md-12' gibi% 100 genişlik kümesine sahip değildir. Her şeyi görmek için DevTools'u kontrol edin ve bunu görün [Çek] (https://github.com/twbs/bootstrap/pull/20934) – vanburen

col-xs-*col-* lehine Bootstrap 4'te düşürüldü: İşte benim tam koddur.

col-12 ile col-xs-12 değiştirin ve beklendiği gibi çalışır.

Ayrıca col-xs-offset-{n} v4 içinde offset-{n} tarafından değiştirilmiştir not edin. col-xs-6 benim için etmeyecek eserler o zaman önyükleme-4 belgelerinde bulundu neden

kaynak

2017-01-22 19:35:50

Bu konuda asla düşünmeyin/bilmeyin! Çok teşekkür ederim. – YoungCoder

Her zaman [docs] 'u (https://v4-alpha.getbootstrap.com/layout/grid/#grid-options) kontrol edin. Mutlu kodlar! ::} <(((*> :: –

Bu, normal olarak dokümanlar için kontrol edeceğiniz bir şey değil. Hep dokümanlar üzerinde çalıştım ve bunu da özledim. Şimdi iki bs4 site geçişi üzerinde, col'ın jenerik olduğunu ve col-x'lerin spesifik olacağını düşünmüştüm, ancak arka planda bu bir anlam ifade etmiyor, çünkü önce mobil, xs ve üstü jenerik (varsayılan). Hatırlattığın için sağol, sanırım son göçüm sırasında bunu yaptık, ama bunun üzerinde sıkışmıştım. – blamb

Gerçekten merak ediyorum. Ekstra küçük cihaz için Sınıf Önek

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

Bootstrap4 "sütun-xs- " sınıfları kullanmak "col-" yerine tüm Bırakılan oldu "sütun-xs" önceki sürümde artık "col-" dir . , yani col-xs-6, col-6 ile değiştirilir.

kaynak

2017-05-25 10:39:50

`sütun-xs- *` Bootstrap 4 Bunu daha önce karşılaşmadım

cevap

İlgili konular