Twitter Lưới khởi động không hoạt động như mong đợi

Question

Tôi đang sử dụng một chủ đề Wordpress cao cấp dựa trên Bootstrap của Twitter. Chủ đề được gọi là StrapPress. Tôi chỉ đang đi với lưới và cố gắng thiết lập mọi thứ theo một cách rất cơ bản, nhưng lưới điện hoạt động theo những cách kỳ lạ. Điều tôi muốn là một phần nội dung chính gồm chín cột và một thanh bên của ba cột. Trong chín cột, tôi muốn có thể có các cột lồng nhau với các vùng nội dung khác nhau: trên một trang, phần đầu tiên sẽ là toàn bộ chín cột và sau đó nội dung bên dưới sẽ được chia thành ba phần bằng nhau.

Đoạn mã sau thiết nó lên tốt mà không có phần đầu tiên trong 9 cột:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

Các 'redBorder' chỉ cần thêm một đường viền màu đỏ 1px xung quanh tất cả mọi thứ để giúp hình dung.

Tuy nhiên, ngay sau khi tôi thêm phần tiếp theo, nó sẽ ảnh hưởng đến nội dung bên dưới nó. Đây là mã mới:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> 
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> 

     <div class="searchSection redBorder" style="height: 100px;"> 
      SEARCH SECTION 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 

    </div> <!-- END OF MAIN CONTENT --> 

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> 
     SIDE 
    </div> <!-- END SIDEBAR --> 

</div> <!-- END OF MAIN FLUID CONTAINER --> 

đây là những gì nó trông giống như sau đó:

Bất cứ ai biết tại sao nó làm điều này? Tại sao nên thêm một số nội dung bên trong đầu của chín cột này làm cho các cột bên dưới thêm phần đệm vào chính chúng sao cho chúng không còn phù hợp trong vùng chứa của chúng nữa?

Answer 1

Điều này là do cách làm việc của lưới làm việc với hàng và nhịp, đặc biệt là quy tắc này trong CSS Bootstrap của:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
} 

Do đó tại sao thêm các nội dung ngay từ đầu có nghĩa là khoảng thời gian khác * yếu tố có lợi nhuận trước chúng. SearchSection có chiều rộng đầy đủ, do đó span4 đầu tiên kết thúc tốt đẹp đến dòng tiếp theo và có lề. Giả sử bạn muốn phần tìm kiếm toàn bộ chiều rộng, cách an toàn để đi sẽ được đặt một hàng-chất lỏng xung quanh span4s:

<div class="searchSection redBorder" style="height: 100px;"> 
     SEARCH SECTION 
    </div> 

    <div class="row-fluid"> 
     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       BLOG 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       RECIPE 
      </div> 
     </div> 

     <div class="span4 redBorder"> 
      <div class = "contentPlaceholder"> 
       LISTING 
      </div> 
     </div> 
    </div> 

</div> <!-- END OF MAIN CONTENT --> 

Đây cũng là sắp xếp của giải thích trong phần cột làm tổ trong các tài liệu, http://twitter.github.com/bootstrap/scaffolding.html#gridSystem .