Twitter的引導 - Failling實現電網系統正常

我與Twitter的引導V2.3.2工作，我想實現這個Twitter的引導 - Failling實現電網系統正常

現在我有這個

對於上帝的愛，我無法按照我想要的格子系統來獲得它。

當你最小化屏幕則認爲應該像這樣

現在這情況與我有

HMTL代碼的代碼進行分組：

<div class="content_wrapper_2"> 
     <!-- First row --> 
     <div class="row"> 
      <div class="span3 box1"> 
       <h4 class="padding">Products</h4> 
      </div> 

      <div class="span3 box2"> 
       <h4 class="padding">Mould labelling</h4> 
      </div> 
     </div> 

     <div class="row"> 
      <br> 
     </div> 

     <div class="row"> 
      <div class="span3 box5"> 
       <h4 class="padding">Services</h4> 
      </div> 

      <div class="span3 box6"> 
       <h4 class="padding">About us</h4> 
      </div> 
     </div> 

     <div class="row"> 
      <br> 
     </div> 

     <!-- Second row --> 
     <div class="row"> 
      <div class="span3 box3"> 
       <h4 class="padding">Let's talk</h4> 
      </div> 

      <div class="span3 box4"> 
       <h4 class="padding">Get a quote</h4> 
      </div> 
     </div><!-- end row --> 

     <div class="row"> 
      <br> 
     </div> 

     <div class="row"> 
      <div class="span3 box7"> 
       <h4 class="padding">Get samples</h4> 
      </div> 

      <div class="span3 box8"> 
       <h4 class="padding">Client login</h4> 
      </div> 
     </div><!-- end row --> 

    </div><!-- end content_wrapper_2 -->

CSS代碼：

.box1{ 
    background-color: yellow; 
    height: 50px 
} 

.box2{ 
    background-color: yellow; 
    height: 50px 
} 

.box3{ 
    background-color: pink; 
    height: 50px 
} 

.box4{ 
    background-color: pink; 
    height: 50px 
} 

.box5{ 
    background-color: yellow; 
    height: 50px 
} 

.box6{ 
    background-color: yellow; 
    height: 50px 
} 

.box7{ 
    background-color: pink; 
    height: 50px 
} 

.box8{ 
    background-color: pink; 
    height: 50px 
}

來源

2016-01-09 GY22

對方回答是接近的，但缺少另一row在每個span6

JsFiddle

<div class=" container"> 
    <div class="row"> 
    <div class="span6"> 
     <div class="row"> 
     <!-- Yellow Items --> 
     </div> 
    </div> 
    <div class="span6"> 
     <div class="row"> 
     <!-- Pink Items --> 
     </div> 
    </div> 
    </div> 
</div>

來源

2016-01-09 02:27:33 Schmalzy

嘗試將黃色和紅色組放在單獨的「span6」塊中。

這些應該在全屏查看時並排顯示，並且在小屏幕上查看時應展開佔據整個寬度。

見下文：

<div class="row"> 

    <!-- yellow items --> 
    <div class="span6"> 
     <div class="span3 box1"> 
      <h4 class="padding">Products</h4> 
     </div> 

     <div class="span3 box2"> 
      <h4 class="padding">Mould labelling</h4> 
     </div> 

     <div class="span3 box5"> 
      <h4 class="padding">Services</h4> 
     </div> 

     <div class="span3 box6"> 
      <h4 class="padding">About us</h4> 
     </div> 
    </div> 
    <!-- end yellow items --> 

    <!-- red items --> 
    <div class="span6> 
     <div class="span3 box3"> 
      <h4 class="padding">Let's talk</h4> 
     </div> 

     <div class="span3 box4"> 
      <h4 class="padding">Get a quote</h4> 
     </div> 

     <div class="span3 box7"> 
      <h4 class="padding">Get samples</h4> 
     </div> 

     <div class="span3 box8"> 
      <h4 class="padding">Client login</h4> 
     </div> 
    </div> 
    <!-- end red items --> 

</div>

來源

2016-01-09 02:21:15

Twitter的引導 - Failling實現電網系統正常

回答

相關問題