`col-xs- *` tidak berfungsi di Bootstrap 4

169

Saya belum pernah mengalami ini sebelumnya, dan saya mengalami kesulitan mencari solusi. Ketika memiliki kolom sama dengan sedang dalam bootstrap seperti:

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

Perataan teks berfungsi dengan baik: masukkan deskripsi gambar di sini

Tetapi ketika membuat kolom sama dengan ekstra kecil seperti:

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

Maka perataan teks tidak lagi berfungsi: masukkan deskripsi gambar di sini

Apakah ada beberapa konsep bootstrap yang saya tidak mengerti atau ini sebenarnya kesalahan seperti yang saya pikirkan. Saya tidak pernah mengalami masalah ini, karena teks saya selalu sejalan dengan xs. Bantuan apa pun akan sangat dihargai. Ini kode lengkap saya:

<!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>
html css twitter-bootstrap twitter-bootstrap-4 text-alignment YoungCoder
sumber
7
col-xs-*tidak ada lagi dalam rilis v4 terbaru itu sebabnya Anda melihat ini. Tidak col-xs-12memiliki set lebar 100% seperti Anda col-md-12. Periksa DevTools untuk melihat semuanya dan lihat Tarik
vanburen

Jawaban:

436

col-xs-*telah dijatuhkan di Bootstrap 4 yang mendukung col-*.

Ganti col-xs-12dengan col-12dan itu akan berfungsi seperti yang diharapkan.

Catatan col-xs-offset-{n}juga diganti dengan offset-{n}di v4.

tao
sumber
8
Bahkan tidak akan pernah memikirkan / mengetahui hal ini! Terima kasih banyak.
YoungCoder
12
Selalu periksa dokumen . Selamat coding! ::} <(((*> ::
tao
8
Ini bukan sesuatu yang biasanya Anda periksa untuk dokumen. Saya sudah seluruh dokumen dan melewatkan ini juga. Saya telah berpikir, lebih dari dua migrasi situs bs4 sekarang, bahwa col adalah untuk generik, dan col-xs akan spesifik, namun jika dipikir-pikir ini tidak masuk akal, karena menjadi mobile pertama, xs ke atas adalah generik (default). Terima kasih atas pengingatnya, saya pikir saya melakukan skim itu selama migrasi terakhir saya, tetapi terjebak pada yang satu ini.
blamb
1
Satu hal melalui Andrei; apakah hanya "xs" yang telah dijatuhkan, atau adakah yang lain juga?
Funk Forty Niner
2
Harap baca jawaban ini tentang apa yang berubah antara v3 dan v4 .) Dan juga tautan ke alat, jika Anda memutuskan untuk melakukannya. Ini bukan tugas yang mudah dan IMHO lebih mudah untuk bekerja pada template bersih dan cukup masukkan php daripada mengubah markup.
tao
21

Saya hanya ingin tahu, mengapa col-xs-6tidak berhasil bagi saya tetapi kemudian saya menemukan jawabannya di dokumentasi Bootstrap 4. Awalan kelas untuk perangkat ekstra kecil sekarang col-berada di versi sebelumnya col-xs.

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

Bootstrap 4 menjatuhkan semua col-xs-*kelas, jadi gunakan col-*saja. Misalnya col-xs-6diganti oleh col-6.

Sabir Hussain
sumber
2

Anda bisa melakukan ini, jika Anda ingin menggunakan sintaks lama (atau tidak ingin menulis ulang setiap templat)

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

Mereka menjatuhkan XS karena Bootstrap dianggap sebagai alat pengembangan yang mengutamakan mobile. Defaultnya dianggap xs dan jadi tidak perlu didefinisikan.

SMWalker
sumber
1

Dalam Bootstrap 4.3 , col-xs- {value} diganti dengan col- {value}

Tidak ada perubahan dalam sm, md, lg, xl tetap sama.

.col- {value}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value}

Dorjee Karma
sumber
-1

Bootstrap 4 Grid col-xs- * class.

Dalam bootstrap 4 kelas kisi berbeda untuk tampilan yang berbeda atau sama.

Jika Anda ingin menggunakan kelas .col-xs- *.

Jadi, kelas ini berfungsi untuk tampilan seluler.

Untuk melihat perbedaannya, Anda dapat mencoba kode ini di bawah dan melihat perbedaannya. Kemudian, gunakan kelas ini dalam kode Anda.

<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
sumber
col-xs dijatuhkan di Bootstrap 4
Wariored
tolong, lihat tautannya: bitdegree.org/learn/… *% 20in% 20Anda% 20kode.
Bharti parmar