col - * - 12 (col-xs/col-sm/etc) sử dụng trong Bootstrap 3

Question

Tôi thấy một cái gì đó như sau trong ví dụ mã trên StackOverflow và trong các chủ đề để bán ngay cả (không bao giờ trong ví dụ của Bootstrap).

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <p>Words go here</p> 
    </div> 
    </div> 
    </div> 

HOẶC

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <p>Words go here</p> 
    </div> 
    </div> 
    </div> 

Nó khiến tôi phát điên vì cả hai đều không chính xác đối với các cột đầy đủ chiều rộng đơn theo tài liệu riêng Bootstrap và ý thức chung.

Khi nào bạn thực sự sử dụng hệ thống lưới điện? Khi nào thì col-*-12 có hiệu lực?

Answer 1

Nếu có gì đó có chiều rộng đầy đủ, bạn không cần gì cả.

Tìm hiểu: http://getbootstrap.com/examples/grid/

Các html đúng cho cả hai ví dụ trên là:

<div class="container"> 

     <p>Words go here</p> 

     </div> <!--/.container for entire grouping of elements you do not want to exceed the width(s) set in the CSS for this class --> 

Nếu bạn muốn các cột của bạn là toàn bộ chiều rộng, nó sẽ được dưới sự cuối cùng lớp cột bạn đã sử dụng. Sau đây sẽ là chiều rộng đầy đủ dưới đây, nơi độ rộng col-sm- min bắt đầu (do đó, 767px và HIỂU trong bản tải xuống mặc định của Bootstrap 3.x).

<div class="row"> 
    <div class="col-sm-4"> 
    Stuff 
    </div><!-- /.col-sm-4 --> 
    <div class="col-sm-8"> 
    Stuff 
    </div><!-- /.col-sm-8 --> 
</div><!-- /.row --> 

Đừng quên .container ngoài hoặc .container-chất lỏng (một cho mỗi nhóm các nội dung mà không làm thay đổi chiều rộng). Các .container hoặc .container-chất lỏng số không ra lề âm trên .row, do đó bạn sẽ không nhận được thanh cuộn ngang.

Các tình huống khi bạn sử dụng col - * - 12 là nơi bạn muốn có một toàn bộ chiều rộng SAU min-width của lớp cột nhỏ:

<div class="row"> 
    <div class="col-sm-6 col-md-12"> 
    Stuff 
    </div><!-- /.col-sm-6 col-md-12 --> 
    <div class="clearfix visible-md"></div> 
    <div class="col-sm-6 col-md-4"> 
    Stuff 
    </div><!-- /.col-sm-6 col-md-12 --> 
</div><!-- /.row --> 

Dù sao, col - * - 12 có ích trong các tình huống làm tổ, đặc biệt là với các biểu mẫu.

Answer 2

Sự thất vọng của bạn là đúng .. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> là hoàn toàn dư thừa.

Vì Bootstrap 3+ là thiết bị di động đầu tiên, bất kỳ lớp col nào bạn khai báo sẽ di chuyển lên, nghĩa là chúng áp dụng cho thiết bị được khai báo (xs, sm, md, lg) và lớn hơn. Vì vậy, col-xs-12 col-sm-12 là không cần thiết. Chỉ cần sử dụng col-xs-12 cho cùng một hiệu ứng.

Ngoài ra, nếu bạn không khai báo lớp xs, bố cục sẽ mặc định là col - * - 12 một lần bên dưới lớp col nhỏ bạn khai báo. ví dụ. <div class="col-sm-6"> có chiều rộng một nửa trên sm trở lên, nhưng có chiều rộng đầy đủ trên xs. Trong khi đó, <div class="col-md-6"> có chiều rộng một nửa trên md trở lên, nhưng có chiều rộng đầy đủ trên sm và xs.

Điều này đang được nói, bạn phải luôn khai báo ít nhất một lớp học col, do đó, nó sẽ có được phần đệm có liên quan và các chi tiết về kiểu dáng khác.