Tôi đang sử dụng hệ thống lưới bootstrap 3 yêu thích nó cho đến nay và mọi thứ đều hoạt động tốt, tôi đang cố gắng sử dụng col-xs-offset-1 và không hoạt động mặc dù .col-sm-offset-1 hoạt động. Tôi còn thiếu gì ở đây?
<div class="col-xs-2 col-xs-offset-1">col</div>
col-xs-*các lớp.
Câu trả lời:
Chỉnh sửa: kể từ khi Bootstrap 3.1 .col-xs-offset-* tồn tại , hãy xem tùy chọn bootstrap :: lưới
.col-xs-offset-*không tồn tại. Đặt hàng bù và cột chỉ dành cho số lượng nhỏ và nhiều hơn. (CHỈ .col-sm-offset-*, .col-md-offset-*và .col-lg-offset-*)
Xem tài liệu chính thức: bootstrap :: lưới tùy chọn
.col-xs-offset-*tồn tại trong bootstrap 3
Ngoài ra, bạn có thể thêm một div trống cho xs-offset (sẽ giúp bạn không phải quản lý nội dung ở nhiều nơi)
<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>
Các nhà phát triển bootstrap dường như từ chối thêm các xs- ofset và các lớp push / pull đó, xem tại đây: https://github.com/twbs/bootstrap/issues/9689
Một gợi ý khi bạn muốn bù trừ nhưng thấy mình không có khả năng ở độ rộng cực nhỏ:
Sử dụng .hidden-xsvà .visible-xstạo một phiên bản của khối html của bạn để có thêm chiều rộng nhỏ và một phiên bản cho mọi thứ khác (nơi bạn vẫn có thể sử dụng một phần bù)
Thí dụ:
<div class="hero container">
<div class="row">
<div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
<h2>This is a banner at the top of my site. It shows in everything except XS</h2>
<p>Here are some supporting details about my banner.</p>
</div>
<div class="visible-xs col-xs-12">
<h2 class="pull-right">This is my banner at XS width.</h2>
<p class="pull-right">This is my supporting content at XS width.</p>
</div>
</div>
</div>
Điều này thực sự khó chịu vì vậy tôi đã viết một ý chính mà bạn có thể lấy để kích hoạt col-offset-xs-*. Tôi cũng nhận thấy rằng Bootstrap SASS repo Bower được cài đặt trong tuần này không bao gồm col-offset-sm-0vì vậy cũng được lấp lánh nhưng sẽ bị dư thừa trong nhiều trường hợp.
/*
Include this after bootstrap.css
Add a class of 'col-xs-offset-*' and
if you want to disable the offset at a larger size add in 'col-*-offset-0'
Examples:
All display sizes (xs,sm,md,lg) have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-3">
xs has an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">
xs and sm have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">
xs, sm and md will have an offset of 1
<div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">
*/
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
margin-left: 0;
}
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
Nó không hoạt động vì col-xs-offset-*được đề cập ngoài truy vấn phương tiện truyền thông. nếu bạn muốn sử dụng nó, bạn phải đề cập đến tất cả phần bù (ví dụ class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0":)
Nhưng điều này không đúng, họ nên đề cập đến col-xs-offset-*trong câu hỏi phương tiện
Kể từ Boostrap 4.x, cũng giống như col-xs-6 bây giờ chỉ là col-6
offset-xs-6 bây giờ chỉ là offset-6 .
Đã thử nó, chắc chắn hoạt động.
thay vì sử dụng col-md-offset-4 hãy sử dụng offset-md-4, bạn không còn phải sử dụng col khi đang bù trừ nữa. Trong trường hợp của bạn, hãy sử dụng offset-xs-1 và điều này sẽ hoạt động. đảm bảo rằng bạn đã gọi thư mục bootstrap.css vào html của mình như sau.
// nó hoạt động trong bootstrap 4, có một số thay đổi trong tài liệu. Chúng tôi không cần tiền tố col-, chỉ cần offset-lg-3, ví dụ:
<div class="row">
<div class="offset-lg-3 col-lg-6"> Some content...
</div>
</div>
// đây doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
xsbù đắp, không phải bù trừ nói chung. Tôi không thể tìm thấy bất kỳ điều gì trong tài liệu về độ lệch xs, cũng như không thể kích hoạt nó bằng cách thêm các lớp bù xs trong DOM. Hy vọng rằng tôi sai, nhưng tôi không thể tìm ra nó.
Theo bootstrap v3.3.7 xs-offseting mới nhất được phép. Xem tài liệu tại đây bootstrap offseting . Vì vậy, bạn có thể sử dụng
<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>
Đề phòng trường hợp ai đó mắc phải lỗi tương tự mà tôi đã làm trước khi tình cờ vào trang này, tức là thêm CSScác quy tắc đặt lại (như cách đặt lại rất phổ biến của Eric Meyer được sử dụng trên hàng triệu trang web) sau khi bao gồm bootstrap.
Ngoài ra, có lẽ tôi nên chỉ ra rằng việc đặt lại như vậy sẽ không cần thiết với bootstrap vì bootrap thực sự thực hiện đặt lại normalize.css v3.0.2 .
-xsviệc bị bỏ trong v4, hãy xem điều này .