在我的页面上,我有一个日历,我希望它具有响应性,因此在大屏幕上它将如下所示:
[Jan] [Feb] [Mar]
[Apr] [May] [June]
[July] [Aug] [Sept]
[Oct] [Nov] [Dec]
当调整到中间位置时:
[Jan] [Feb]
[Mar] [Apr]
[May] [June]
[July] [Aug]
[Sept] [Oct]
[Nov] [Dec]
问题在于我将它们按3个元素分组到一行(大屏幕视图)。
(我将这些课程分配给了我的“月份”:class="col-lg-4 col-md-6"
)
因此,当我将屏幕尺寸更改为中间时,它仍然按行分组,看起来如此:
[Jan] [Feb]
[Mar]
[Apr] [May]
[June]
[July] [Aug]
[Sept]
[Oct] [Nov]
[Dec]
有什么方法可以解决这个问题吗?
答案 0 :(得分:1)
您可以使用一个.row
并使用.clearfix visible-lg-block
在每个第3个项目中使用大屏幕。请参阅有关Responsive Columns Resets
[class^="col-"] {
border: solid red;
height: 50px;
text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">Jan</div>
<div class="col-md-6 col-lg-3">Feb</div>
<div class="col-md-6 col-lg-3">Mar</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Apr</div>
<div class="col-md-6 col-lg-3">May</div>
<div class="col-md-6 col-lg-3">Jun</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Jul</div>
<div class="col-md-6 col-lg-3">Aug</div>
<div class="col-md-6 col-lg-3">Sep</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-md-6 col-lg-3">Oct</div>
<div class="col-md-6 col-lg-3">Nov</div>
<div class="col-md-6 col-lg-3">Dez</div>
</div>
</div>