答案 0 :(得分:1)
你必须学习grid bootstrap system。您可以定义每个设备的大小。 Take a look at bootstrap。这个想法很简单,col-xs定义了手机的宽度,col-sm定义了平板电脑的宽度,col-md定义了桌面宽度,col-lg定义了像TV这样的大型设备。
请参阅下面的示例,您可以预览(如移动设备),然后点击"整页"预览更大的设备。
我希望它有所帮助
.well{
font-size:40px;
font-weight: 500;
text-align:center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-6 col-xs-12 well">
1
</div>
<div class="col-sm-3 col-xs-12">
<div class="col-sm-12 col-xs-6 well">
2.1
</div>
<div class="col-sm-12 col-xs-6 well">
2.2
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="col-sm-12 col-xs-6 well">
3.1
</div>
<div class="col-sm-12 col-xs-6 well">
3.2
</div>
</div>
</div>
&#13;
答案 1 :(得分:1)
这很容易做到,您只需要将其设置为嵌套结构,并将正确的col-lg-x
,col-md-x
,col-sm-x
,col-xs-x
类应用于每个级别。
这是一个快速的小投掷,完全符合您的要求:
div {
border: 1px solid black;
padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">1</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.1</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.1</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.1</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.1</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.2</div>
</div>
</div>
注意:我添加了1px border
和10px padding
,以使其更加引人注目。
为了更好地演示这一点,这里是一个Bootply:http://www.bootply.com/WOrm6c6sm1
答案 2 :(得分:0)
肯定有,我建议你看一下bootstrap的网格系统文档(下面的链接)。这个接缝是一个相对简单的问题,只需通过使用嵌套网格来解决,但为了让你开始我已经让你成为这个东西。
http://getbootstrap.com/css/#grid
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="bigBox"></div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6">
<div class="smallBox"></div>
</div>
<div class="col-xs-6">
<div class="smallBox"></div>
</div>
</div>
</div>
</div>