Hàng khởi động Twitter có các nhịp bao trùm

Question

Sử dụng trình khởi động twitter, tôi đang cố gắng tìm ra lý do tại sao cột "cuối cùng" kết thúc tốt đẹp.

<div class="row span4 solidBottom"> 
     <div class="span1"> 
      <label>A</label> 
     </div> 
     <div class="span1"> 
      <label>B</label> 
     </div> 
     <div class="span1"> 
      <label>C</label> 
     </div> 
     <div class="span1"> 
      <label>D</label> 
     </div> 
</div> 

Nó là kết quả trong:

A B C 
D 
___________ 

SPAN 4 = 300px 
Four Span1s = 240 
3 Paddings = 60 
240 + 60 = 300 

Vì vậy, bất kỳ manh mối nào về lý do tại sao nó kết thúc tốt đẹp?

Tôi đang cố tạo biểu mẫu nhiều cột và muốn giữ cho các cột và hàng được tổ chức.

Cảm ơn bạn.

CHỈNH SỬA: thêm style="width:auto" vào hàng giải quyết vấn đề, nhưng tại sao gói chiều rộng mặc định 300px?

Answer 1

Bạn đúng là span4 là 300px, nhưng tôi tin rằng có lỗi trong HTML của bạn.

Bạn cần bọc các cột lồng nhau trong một lớp .row mới. Khi bạn làm điều này, gói dừng lại. Xem http://jsfiddle.net/panchroma/UBTv4/ và ví dụ bằng cách sử dụng lưới Bootstrap mặc định (không có chất lỏng).

Đây là HTML Tôi đã sử dụng:

<div class="container"> 

<div class="row"> 
    <div class="span4 solidBottom"> 

     <div class="row"> 
      <div class="span1"> 
       <label>A</label> 
      </div> 

      <div class="span1"> 
       <label>B</label> 
      </div> 

      <div class="span1"> 
       <label>C</label> 
      </div> 

      <div class="span1"> 
       <label>D</label> 
      </div> 

     </div> <!-- end nested row --> 

     <div class="span8"> </div> 

    </div> <!-- end parent row --> 
</div> <!-- end container --> 

Đối với lưới cố định, số lượng các cột ở hàng lồng nhau nên thêm lên đến số lượng colums trong cột cha mẹ (tức Bốn trong trường hợp này)

Nếu bạn đang sử dụng lưới chất lỏng (tức là hàng lỏng), số cột trong hàng lồng nhau sẽ thêm tối đa 12.