Question

我正在使用引导程序4，并且我的标记通过for loop运行，它会产生八个item div。

我希望连续包含五个项目，所以我正在运行col-2。但是很明显，它将连续显示六个。

由于我无法在标记中添加偏移量（因为它位于for循环中），因此我通过JS添加了

$('.item:nth-child(5n+1)').addClass('offset-1');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>



<div class="test">
  <div class="container">
    <div class="row justify-content-center">

      <div class="item col-2">
        <p>test 1</p>
      </div>
      
      <div class="item col-2">
        <p>test 2</p>
      </div>
      
      <div class="item col-2">
        <p>test 3</p>
      </div>
      
      <div class="item col-2">
        <p>test 4</p>
      </div>
      
      <div class="item col-2">
        <p>test 5</p>
      </div>
      
      <div class="item col-2">
        <p>test 6</p>
      </div>
      
      <div class="item col-2">
        <p>test 7</p>
      </div>
      
      <div class="item col-2">
        <p>test 8</p>
      </div>
      
    </div>
  </div>
</div>

但是，我只希望JS在min-width: 1440px上运行。

这可能吗？

Answer 1

为此，您甚至不需要javscript，请使用CSS。只需添加另一个类：

@media(min-width: 1440px){
  .col-5{
    width: 20%;
  }
}

Answer 2

尝试一下，哥们

if (window.innerWidth >= 1440) {
    console.log(window.innerWidth)
    ...
    // your code here
}

如何仅在特定屏幕尺寸下将CSS类与脚本一起应用？

2 个答案: