Question

我有：

<div class="row">
    <div class="col-sm-3 col-md-2 col-lg-1">Col 1</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 2</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 3</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 4</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 5</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 6</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 7</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 8</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 9</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col A</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col B</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col C</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col D</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col E</div>
</div>

我想看看：

屏幕1200px < width - Col 1至Col B
992px < width < 1200px - Col 1至Col 6和
768px < width < 992px - Col 1至Col 4

并根据屏幕宽度和col- [sm | md | lg]设置自动隐藏所有其他列。有没有办法只通过css启用它？

Answer 1

您可以使用ntn css

对css查询进行一些自定义

@media (min-width: 768px) and (max-width: 992px) {
  .row-filter .col-sm-3:nth-child(n + 5){
    display: none;
  }
  
}


@media (min-width: 992px) and (max-width: 1200px) {
  .row-filter .col-md-2:nth-child(n + 7){
    display: none;
  }
}

@media (min-width: 1200px) {
  .row-filter .col-lg-1:nth-child(n + 13){
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="row row-filter">
    <div class="col-sm-3 col-md-2 col-lg-1">Col 1</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 2</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 3</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 4</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 5</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 6</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 7</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 8</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 9</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col A</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col B</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col C</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col D</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col E</div>
</div>

请参阅codepen https://codepen.io/anon/pen/rvPJOY

过去12时隐藏bootstrap 3列

1 个答案: