Kết hợp col và hàng lớp Bootstrap vào yếu tố duy nhất

Question

một:

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
     . 
     . 
     </div> 
    </div> 
</div> 

hai:

<div class="row"> 
    <div class="col-md-12 row"> 
    . 
    . 
    </div> 
</div> 

là cả việc triển khai đang cùng tôi có thể sử dụng phương pháp 2 để tôi? có thể giảm đánh dấu.

Answer 1

Theo Bootstrap's own API documentation, khi nesting columns bất kỳ cột nào .col phải được lồng trong một .row. Cả hai không nên được kết hợp trên một phần tử duy nhất.

Ngoài thực tế, điều này có ý nghĩa hơn về mặt ngữ nghĩa - các thuộc tính CSS cơ bản mà cả hai lớp ảnh hưởng đều phụ thuộc vào cấu trúc này.

Cũng lưu ý, khi sử dụng col-md-12 cách ly, bạn đang tạo một phần tử chiều rộng đầy đủ (dù sao là hàng nào). Trong trường hợp sử dụng bố cục lưới có thể không liên quan trừ khi bạn có các yếu tố khác hiển thị/phát ra ở các kích thước màn hình khác nhau.

phải (nếu sử dụng các cột khác cũng như col-md-12):

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
     . 
     . 
     </div> 
    </div> 
</div> 

sai:

<div class="row"> 
    <div class="col-md-12 row"> 
    . 
    . 
    </div> 
</div> 

Nếu bạn chỉ muốn một yếu tố đầy đủ chiều rộng, bạn không cần phải sử dụng bố trí lưới và/hoặc có thể loại bỏ một mức làm tổ.

Answer 2

1.If bạn cần nhiều .col- liên tiếp sau đó bạn có thể viết như sau ..

<div class="row"> 
    <div class="col-md-6"> 
     . 
     . 
     . 
    </div> 
    <div class="col-md-6"> 
     . 
     . 
     . 
    </div> 
</div> 

2. if you need to divide `.col-` in more `.col` then 

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-6"> 
       . 
       . 
       . 
      </div> 
      <div class="col-md-6"> 
       . 
       . 
       . 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
    . 
    . 
    </div> 
</div>