html - 根据屏幕宽度设置一行产品的数量

Question

我想根据屏幕宽度设置连续的产品数量。即在普通屏幕上它会连续 3 个。然后在大屏幕上它会是 4 个在超大屏幕上它会是 5 等等上。我已经检查了几个解决方案，但它们没有用，有些是 Stackoverflow1 stackoverflow2外部容器宽度是固定的，即 1328 像素。我正在使用 Bootstrap 。

<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 类，这样就不会出现边距问题。