`col-xs- *` không hoạt động trong Bootstrap 4

169

Tôi chưa gặp phải điều này trước đây và tôi đang rất khó khăn để cố gắng tìm giải pháp. Khi có một cột bằng trung bình trong bootstrap như vậy:

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

Văn bản căn chỉnh hoạt động tốt:

Nhưng khi làm cột bằng nhỏ như vậy:

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

Sau đó, căn chỉnh văn bản không còn hoạt động:

Có một số khái niệm bootstrap mà tôi không hiểu hoặc thực tế đây có phải là một lỗi như tôi nghĩ không. Tôi chưa bao giờ gặp vấn đề này, vì văn bản của tôi luôn được căn chỉnh trong quá khứ với xs. Mọi sự trợ giúp sẽ rất được trân trọng. Đây là mã hoàn chỉnh của tôi:

<!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
nguồn

7

col-xs-*không còn tồn tại trong phiên bản v4 mới nhất, đó là lý do tại sao bạn nhìn thấy điều này. Các col-xs-12không có một bộ chiều rộng là 100% như của bạn col-md-12. Kiểm tra DevTools để xem mọi thứ và xem Pull

— vanburen

436

col-xs-*đã được bỏ trong Bootstrap 4 ủng hộ col-*.

Thay thế col-xs-12bằng col-12và nó sẽ hoạt động như mong đợi.

Cũng lưu ý col-xs-offset-{n}đã được thay thế bởi offset-{n}trong v4.

— tao
nguồn

8

Thậm chí không bao giờ sẽ nghĩ / biết về điều này! Cảm ơn bạn rất nhiều.

— YoungCoder

12

Luôn luôn kiểm tra tài liệu . Chúc mừng mã hóa! ::} <(((*> ::

— tao

8

Đây không phải là thứ bạn thường kiểm tra tài liệu. Tôi đã ở khắp các tài liệu và cũng bỏ lỡ điều này. Tôi đã nghĩ rằng, qua hai lần di chuyển trang web bs4 bây giờ, col đó là dành cho chung và col-xs sẽ cụ thể, tuy nhiên, nhìn chung điều này không có ý nghĩa gì, bởi vì trước tiên, di động, xs trở lên là chung chung (mặc định). Cảm ơn đã nhắc nhở, tôi nghĩ rằng tôi đã đọc lướt nó trong lần di chuyển cuối cùng của tôi, nhưng đã bị mắc kẹt trên cái này.

— blamb

1

Một điều mặc dù Andrei; nó chỉ là "xs" đã bị loại bỏ, hay còn có những cái khác nữa?

— Funk Bốn mươi Niner

2

Vui lòng đọc câu trả lời này về những gì đã thay đổi giữa v3 và v4 .) Và cũng là một liên kết đến một công cụ, nếu bạn quyết định đi theo cách đó. Đây không phải là một nhiệm vụ dễ dàng và IMHO dễ dàng hơn để làm việc trên mẫu sạch và chỉ cần chèn php hơn là thay đổi đánh dấu.

— tao

21

Tôi chỉ tự hỏi, tại sao col-xs-6nó không làm việc cho tôi nhưng sau đó tôi đã tìm thấy câu trả lời trong tài liệu Bootstrap 4. Tiền tố lớp cho các thiết bị nhỏ thêm bây giờ là col-trong các phiên bản trước đó col-xs.

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

Bootstrap 4 đã bỏ tất cả col-xs-*các lớp, vì vậy hãy sử dụng col-*thay thế. Ví dụ col-xs-6thay thế bằng col-6.

— Sabir Hussain
nguồn

2

bạn có thể làm điều này, nếu bạn muốn sử dụng cú pháp cũ (hoặc không muốn viết lại mọi mẫu)

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

— wiwolavida
nguồn

2

Họ đã bỏ XS vì Bootstrap được coi là một công cụ phát triển đầu tiên trên thiết bị di động. Mặc định của nó được coi là xs và do đó không cần phải xác định.

— SMWalker
nguồn

1

Trong Bootstrap 4.3 , col-xs- {value} được thay thế bằng col- {value}

Không có thay đổi trong sm, md, lg, xl vẫn như cũ.

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

— Nghiệp chướng
nguồn

-1

Bootstrap 4 lớp col-xs- *.

Trong bootstrap 4 lớp lưới là khác nhau cho chế độ xem khác nhau hoặc cho cùng.

Nếu bạn muốn sử dụng lớp .col-xs- *.

Vì vậy, lớp này đang làm việc cho xem di động.

Để thấy sự khác biệt, bạn có thể thử mã này bên dưới và xem sự khác biệt. Sau đó, sử dụng lớp này trong mã của bạ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
nguồn

col-xs bị rơi trong Bootstrap 4

— Wariored

xin vui lòng, hãy xem liên kết của nó: bitdegree.org/learn/ từ *% 20in% 20your% 20code.

— bharti parmar