Cách tiếp cận tốt nhất để chia cột lưới Bootstrap

Question

Tôi đã chia các cột lưới Bootstrap của tôi theo cách sau.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A</div> 
     <div class="col-md-6"> 
      <div class="col-md-12">B1</div> 
      <div class="col-md-12"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class="col-md-12"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 
     <div class="col-md-3">C</div> 
    </div> 
</div> 

Hãy tìm thấy bên dưới của bố trí hình ảnh của mã này.

Cách tiếp cận của tôi là phân chia các cột lưới đúng hay sai?

Answer 1

Luôn quấn cột của bạn bên trong một hàng để tránh bất kỳ sự phá vỡ css khi thay đổi kích thước/hoặc một cái gì đó như thế

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A </div> 

     <div class="col-md-6">B 
      <div class="row"> 
       <div class="col-md-12">B1</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class="row"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3">C </div> 
    </div> 
</div> 

Answer 2

Chỉ cần thêm row div bên trong B cho mỗi dòng cột bên trong: b, b1.1, b1.2 và b2.1, b2.2. Điều này sẽ giúp.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
     A 
     </div> 


     <div class="col-md-6"> 
      <div class='row'> 
        <div class="col-md-12">B1</div> 
      </div> 
      <div class='row'> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 
      <div class='row'> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3"> 
     C 
     </div> 
    </div> 

</div> 

Answer 3

Bạn nên thêm divs hàng cho trẻ em bên B.

<div class="container-fluid"> 

    <div class="row"> 
     <div class="col-md-3"> 
     A 
     </div> 


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

      <div class="row"> 
       <div class="col-md-8">B1.1</div> 
       <div class="col-md-4">B1.2</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10">B2.1</div> 
       <div class="col-md-2">B2.2</div> 
      </div> 
     </div> 

     <div class="col-md-3"> 
     C 
     </div> 
    </div> 

</div> 

Answer 4

Bạn nên luôn luôn bao bọc các cột bên trong row để bố cục tốt hơn mà không có khoảng trắng trong các cột hoặc clearfix cho bố cục có khoảng trắng:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3">A</div> 
     <div class="col-md-6"> 
      <div class="clearfix"> 
       <div class="col-md-12">B1</div> 
      </div> 
      <div class="clearfix"> 
       <div class="col-md-12"> 
        <div class="clearfix"> 
         <div class="col-md-8">B1.1</div> 
         <div class="col-md-4">B1.2</div> 
        </div> 
       </div> 
      </div> 
      <div class="clearfix"> 
      <div class="col-md-12"> 
       <div class="clearfix"> 
        <div class="col-md-10">B2.1</div> 
        <div class="col-md-2">B2.2</div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3">C</div> 
    </div> 
</div> 

Bạn có thể quan tâm để xem câu hỏi này, Remove padding from columns.