安排在Bootstrap中

Question

我必须为mmorpg创建一个字符页面，该页面应该在130x130px的父级内部有一个字符图像32x32px和所属项目col-xs-12 col-sm-12 col-md-5 col-lg-5。

Answer 1

输出可能与图片不完全相同，但它很接近。

HTML

<div class="row-fluid">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
        <div class="row-fluid">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                 <div class="beta32"></div> 
                 <div class="beta32"></div> 
                 <div class="beta32"></div> 
                 <div class="beta32"></div>           
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="alpha130"></div>
                    <div class="row-fluid">
                        <div class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-3 col-xs-offset-1">
                             <div class="beta32"></div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                             <div class="beta32"></div>
                        </div>
                </div> 
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                 <div class="beta32"></div> 
                 <div class="beta32"></div> 
                 <div class="beta32"></div> 
                 <div class="beta32"></div>           
            </div>
       </div>
   </div>
</div>

Fiddle