如何從V2.X遷移此引導電網V3.0的

Question

我想創建該網格與Twitter的引導3

<div class="container-fluid border"> 
    <div class="row-fluid debug2"> 
     <div class="span2 debug">aa</div> 
     <div class="span3 debug">bb</div> 

     <div class="span3 debug" style="float:left; height:300px;"></div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span3">xxx</div> 
    </div> 

</div> 

Grid Picture

Answer 1

你可以找到關於如何從引導升級指導v2.x至v3.x here。

row-fluid現在是現在row

.span*是.col-xs-*，.col-sm-*，.col-md-*或.col-lg-*。根據屏幕大小進行配置。

基本上它翻譯成這樣：

<div class="container border"> 
    <div class="row debug2"> 
     <div class="col-md-2 debug">aa</div> 
     <div class="col-md-3 debug">bb</div> 
     <div class="col-md-3 debug" style="float:left; height:300px;"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3">xxx</div> 
    </div> 
</div> 

Answer 2

試試這個

.border { 
 
    border: 1px solid grey; 
 
    
 
}

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="row"> 
 

 
     
 
      <div class="col-xs-12"> 
 
       <div class="row "> 
 
        
 
        <div class="col-xs-4 border" style="height:150px;"></div> 
 
        <div class="col-xs-2" ></div> 
 
        <div class="col-xs-3 border" style="height:50px;"></div> 
 
        <div class="col-xs-3 border" style="height:50px;"></div> 
 
        
 
         <div class="col-xs-4"></div> 
 
        <div class="col-xs-8 border" style="height:250px;"></div> 
 
       </div> 
 
      </div> 
 
      
 
      
 
      
 
     </div> 
 
    </div> 
 
</div>