Question

我想用twitter bootstrap 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

您可以找到有关如何从Bootstrap 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

试试这个

＆＃13;

.border {
  border: 1px solid grey;  
    
}

＆＃13;

<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>

＆＃13;

如何将此Bootstrap网格从v2.x迁移到v3.x

2 个答案: