Question

我想根据屏幕宽度连续设置我的产品数量。在正常屏幕上，它将连续3个。然后在大屏幕上，在超大屏幕上将是4，它将是5等等on.I已经检查了几个解决方案，但他们没有工作，有些是Stackoverflow1 stackoverflow2 外容器宽度是固定的，即1328 px。我正在使用自助。

<div class="container">
    <div class="col-md-12">
       <div class="col-md-2">
          //categories sidebar
       </div>
       <div class="col-md-8">
          //categories sidebar
       </div>
       <div class="col-md-2">
           //categories sidebar
       </div>
     </div>
</div>

提前致谢。

Answer 1

如果你不介意使用12的倍数，那么使用bootstrap很容易：

http://www.bootply.com/F5yisSxsQm

<div class="container">
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">Text</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Text</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Text</div>
  <div class="col-sm-6 col-md-4 col-lg-3">Text</div>
  </div>
</div>

确保在.container和.col-md- *之间使用.row类，这样就不会出现保证金问题。

Answer 2

对于非Bootstrap案例 - use CSS media queries.

示例：

.container {
    width: 1328px;
}
.container .column {
    width: 33%; /* 3 per-row */
}
@media screen and (max-width: 700px) {
    .container .column {
        width: 20%; /* 5 per-row */
    }
}

对于Bootstrap 3.x.x，您可以使用与当前添加的类相同的方法。 col-md-*课程适用于中型桌面屏幕，但您也可以使用col-xs-*，col-sm-*和col-lg-*旁边（根据文档）手机，平板电脑和大型屏幕桌面大小的屏幕分别。

<div class="container">
    <div class="col-md-12">
       <div class="col-md-2 col-lg-2">
          //categories sidebar
       </div>
       <div class="col-md-8 col-lg-4">
          //categories sidebar
       </div>
       <div class="col-md-2 col-lg-2">
           //categories sidebar
       </div>
       <div class="col-md-2 col-lg-4">
          //added column - wraps around to a new row on non-large screens
       </div>
    </div>
</div>

根据屏幕宽度连续设置产品数量

2 个答案: