Netstrap 3 của Twitter, thay đổi điểm ngắt và loại bỏ phần đệm

Question

Tôi đang cố gắng chuyển sang lưới điện 3 mới và tôi gặp phải một số khó khăn.

1. Làm cách nào để lưới có ngăn xếp dưới 480px nhưng không nằm trong khoảng từ 480px đến 768px?
2. phía trên 768px phần đệm bên trái của phần đầu tiên và phần đệm bên phải nằm ngoài vùng chứa, nhưng dưới 768px đệm nằm bên trong vùng chứa để giao diện khác vì nội dung không được căn chỉnh với vùng chứa có thể ở trên.
3. khi lưới ngăn xếp padding vẫn nhưng với tôi nó nên có ít 0.

Bất kỳ trợ giúp sẽ được chào đón tôi đang sử dụng mã dưới đây với bootstrap 3 RC1

<div class="container" style="background-color: purple;"> 
container 

</div> 

<div class="container"> 
    <div class="row"> 
     <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
     <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div> 
    </div> 
</div> 

Answer 1

cập nhật tháng một 2014

Xem thêm: https://github.com/twbs/bootstrap/issues/10203

update 21 aug 2013 Kể từ khi Twitter Bootstrap 3 RC2 được đề cập bên dưới đã được đổi tên thành xs-col- * Hiện có bốn lớp lưới: xs-col- * (di động, không bao giờ ngăn xếp), col-sm - * (máy tính bảng, ngăn xếp dưới 768px), col-md- * (máy tính xách tay, ngăn xếp dưới 992 px) và col-lg- * (máy tính để bàn, ngăn xếp dưới 1200px).

cập nhật Trong câu trả lời trước của tôi sử dụng bảng này từ các tài liệu gần đây:

[hình ảnh cũ bị gỡ bỏ]

Khi tôi kiểm tra các giá trị này nếu tìm thấy một cái gì đó khác nhau:

• "col-xs- *" wil l được áp dụng luôn (không bao giờ ngăn xếp)
• "col-sm- *" sẽ được áp dụng từ 768 trở lên (992px) (ngăn xếp tại 767)
• "col-lg- *" sẽ được áp dụng từ 992 trở lên (ngăn xếp tại 991)

Trong variables.less bạn sẽ tìm thấy:

// Media queries breakpoints 
// -------------------------------------------------- 

// Tiny screen/phone 
@screen-tiny:    480px; 
@screen-phone:    @screen-tiny; 

// Small screen/tablet 
@screen-small:    768px; 
@screen-tablet:    @screen-small; 

// Medium screen/desktop 
@screen-medium:    992px; 
@screen-desktop:    @screen-medium; 

Nhưng có vẻ không phải là một breakpoint tại 480 (hoặc như @fred_ nói lưới thiếu col- ts- * (nhỏ đến nhỏ) tập các lớp). Xem thêm: https://github.com/twbs/bootstrap/issues/9746

Để đặt điểm xếp ở 480px, bạn sẽ phải biên dịch lại css của bạn. Đặt @ màn hình nhỏ thành 480px; và xác định cols của bạn với: <div style="background-color: red" class="col-sm-4"> sau đó. Lưu ý điều này sẽ thay đổi @ lưới-float-breakpoint cũng gây ra nó được định nghĩa là @grid-float-breakpoint: @screen-tablet;.

Khi thêm hàng vào vùng chứa, tôi không tìm thấy vấn đề với đệm.

Hoặc thử: http://www.bootply.com/70212 nó sẽ ngăn xếp dưới 480px thêm một truy vấn phương tiện truyền thông (javascript được sử dụng để chỉ minh họa)

câu trả lời trước

Từ nay của Twitter Bootstrap định nghĩa ba lưới: lưới Tiny cho Điện thoại (< 480px), Lưới nhỏ cho máy tính bảng (< 768px) và lưới trung bình lớn cho Destkops (> 768px). Tiền tố lớp hàng cho các lưới này là “.col-”, “.col-sm-” và “.col-lg-”. Lưới trung bình lớn sẽ xếp dưới chiều rộng màn hình 768 pixel. Vì vậy, các lưới nhỏ dưới 480 pixel và lưới nhỏ không bao giờ ngăn xếp.

Với tiền tố "col-4" của bạn, lưới sẽ không bao giờ được xếp chồng. Vì vậy, loại bỏ "col-4" để cho lưới của bạn ngăn xếp dưới 480px. Điều này cũng sẽ loại bỏ nguyên nhân đệm là ngăn xếp ngay bây giờ.

Xem thêm: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ và Writing Twitter's Bootstrap with upgrading to v3 in mind

Answer 2

1. Sử dụng lớp .col-ts-12 cho tất cả 100% divs dưới 480 và đặt mã này vào cuối bootstrap.css:

   @media (max-width: 480px) { .col-ts-12 { float: none; } }

Answer 3

Để thực hiện bất kỳ thay đổi nào cho các thiết bị nhỏ đến nhỏ, bạn sẽ cần bao gồm các truy vấn phương tiện của riêng bạn để thêm các điểm ngắt bổ sung của riêng bạn.

Ví dụ:

@media (max-width: 480px) { 
    .no-float { 
     display:block; 
     float:none; 
     padding:0; 
    } 
} 

Tôi không hoàn toàn chắc chắn những gì bạn đang cố gắng để đạt được với điều này, nhưng đây là cách bạn sẽ áp dụng phong cách nơi chiều rộng màn hình dưới 480.