Question

在我的页面上，我有一个日历，我希望它具有响应性，因此在大屏幕上它将如下所示：

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

有什么方法可以解决这个问题吗？

Answer 1

您可以使用一个.row并使用.clearfix visible-lg-block在每个第3个项目中使用大屏幕。请参阅有关Responsive Columns Resets

的Bootstrap文档

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

当屏幕大小更改Bootstrap时，将项目从一行移动到另一行

1 个答案: