`col-xs- *` Bootstrap 4'te çalışmıyor

169

Bu daha önce karşılaşmadım ve çözümü bulmaya çalışırken çok zorlanıyorum. Önyükleme sırasında böyle bir sütun ortama eşit olduğunda:

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

Metin hizalama iyi çalışır:

Ancak sütunu bu şekilde ekstra küçük hale getirirken:

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

Sonra metin hizalama artık çalışmaz:

Anlamadığım bazı bootstrap kavramı var mı yoksa aslında sanırım öyle bir hata mı? Metnim her zaman geçmişte xs ile hizalandığı için bu sorunu hiç yaşamadım. Herhangi bir yardım büyük mutluluk duyacağız. İşte benim tam kod:

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

— YoungCoder
kaynak

7

col-xs-*artık en son v4 sürümünde mevcut değil, bu yüzden bunu görüyorsunuz. col-xs-12Kız kardeşin gibi% 100'lük bir genişlik kümesi yoktur col-md-12. Her şeyi görmek için DevTools'un kontrol edin ve bunu görmek Pull

— vanburen

437

col-xs-*lehine Bootstrap 4'e bırakılmıştır col-*.

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

Ayrıca not v4'te col-xs-offset-{n}değiştirildi offset-{n}.

— tao
kaynak

8

Bunu asla düşünemez / bilemezdim! Çok teşekkür ederim.

— YoungCoder

12

Her zaman dokümanları kontrol edin . Mutlu kodlama! ::} <(((* * ::

— tao

8

Bu normalde dokümanları kontrol edeceğiniz bir şey değildir. Belgelerin her tarafýndaydým ve bunu da özledim. Şimdi iki bs4 site geçişi üzerinde, col genel için olduğunu ve col-xs belirli olacağını düşündüm, ancak bu bir anlam ifade etmez, çünkü mobil ilk olmak, xs ve up genel (varsayılan). Hatırlatma için teşekkürler, sanırım son geçişim sırasında bunu gözden kaçırdım, ama bu konuda takılıp kaldım.

— blamb

1

Bir şey olsa Andrei; düşürülen sadece "xs" mi yoksa başkaları da var mı?

— Funk Forty Niner

2

Lütfen v3 ve v4 arasında nelerin değiştiği ile ilgili bu yanıtı okuyun .) Ve aynı zamanda bir araçla bağlantı kurmaya karar verirseniz. Bu kolay bir iş değildir ve IMHO temiz şablon üzerinde çalışmak ve sadece işaretlemeyi değiştirmek yerine php eklemek daha kolaydır.

— tao

21

Merak ettim, neden col-xs-6benim için işe yaramadı ama cevabı Bootstrap 4 belgelerinde buldum. Ekstra küçük cihazlar için sınıf öneki col-, önceki sürümlerde olduğu gibidir col-xs.

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

Bootstrap 4 tüm col-xs-*sınıfları düşürdü , col-*bunun yerine kullanın. Örneğin, ile col-xs-6değiştirilir col-6.

— Sabir Hussain
kaynak

2

eski sözdizimini kullanmak istiyorsanız (veya her şablonu yeniden yazmak istemiyorsanız) bunu yapabilirsiniz

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
kaynak

2

XS'i düşürdüler çünkü Bootstrap mobil ilk geliştirme aracı olarak kabul edildi. Varsayılan değeri xs olarak kabul edilir ve bu yüzden tanımlanması gerekmez.

— SMWalker
kaynak

1

İçinde Bootstrap 4.3 , col-xs- {değer} col- {değeri} değiştirilir

Hiçbir değişiklik yok sm, md, lg xl, aynı kalır.

.col- {değer}
.col-sm- {değer}
.col-md- {değer}
.col-lg- {değer}
.col-xl- {değer}

— Dorjee Karma
kaynak

-1

Bootstrap 4 Grid col-xs- * sınıfı.

Bootstrap'te 4 ızgara sınıfı farklı görünüm veya aynı görünüm için farklıdır.

.Col-xs- * sınıfını kullanmak istiyorsanız.

Yani, bu sınıf mobil görünüm için çalışıyor.

Farkı görmek için aşağıda bu kodu deneyebilir ve farkı görebilirsiniz. Ardından, kodunuzda bu sınıfı kullanın.

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— bharti parmar
kaynak

col-xs Bootstrap 4'te düştü

— Wariored

lütfen, linke bir göz atın: bitdegree.org/learn/… *% 20in% 20yo% 20 kodunuz.

— bharti parmar