css 为什么这些卡片没有被过滤而飘向左边？

esyap4oy  于 2023-02-06  发布在  其他
关注(0)|答案(1)|浏览(106)

这些卡的class已更新，但它们不会被过滤并浮动到左侧。

let btnDiv = document.getElementById('filterBtnContainer');
      let btns = btnDiv.querySelectorAll('.btn');
      btns.forEach((btn, i) => {
        let btnValue = `q${i}`;
        btn.classList.add('btn', 'filter');
        btn.setAttribute('type', 'submit');
        btn.setAttribute('value', btnValue);
        btn.addEventListener('click', () => {
          filterSelection(btnValue);
        });
      });

      //filterSelection('q0');

      function filterSelection(c) {
        console.log(c)
        let cardContainer = document.getElementById('cardsContainer');
        var x, i;
        x = cardContainer.getElementsByClassName("card");
        if (c == 'q0') c = "";

        for (i = 0; i < x.length; i++) {
          removeClass(x[i], "show");
          if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
        }
      }

      // Show filtered elements
      function addClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
          if (arr1.indexOf(arr2[i]) == -1) {
            element.className += " " + arr2[i];
          }
        }
      }

      // Hide elements that are not selected
      function removeClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i < arr2.length; i++) {
          while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
          }
        }
        element.className = arr1.join(" ");
      }
.card {
  background-color: #fafafa;
  font-size: 12px;
  border-radius: 5px !important;
  flex-basis: 25%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  outline: none;
  border-radius: 7px;
  flex-direction: inherit !important;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
  display: none;
}

.card:hover {
  transform: scale(1.01);
}

.card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.show {
  display: flex;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="filterBtnContainer">
  <button class="btn filter active" type="submit" value="q0">All</button>
  <button class="btn filter" type="submit" value="q1">Q1</button>
  <button class="btn filter" type="submit" value="q2">Q2</button>
  <button class="btn filter" type="submit" value="q3">Q3</button>
  <button class="btn filter" type="submit" value="q4">Q4</button>
  </div>
<div id="cardsContainer">
  <div class="row crd-group">
    <div class="col-6 col-md-6 col-xl-3">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
        <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
        <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
        <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="date">Date:</label>
        <input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
        <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select></div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label>
        <input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a></div>
        <div class="col-12 mt-3"><label for="post">Post:</label>
        <textarea class="form-control post" name="post">Lorem Ipsum</textarea>
        </div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
        </a>
        <input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
        </div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label>
        <input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-3">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
        <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
        <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
        <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="date">Date:</label>
        <input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
        <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select></div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label>
        <input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a></div>
        <div class="col-12 mt-3"><label for="post">Post:</label>
        <textarea class="form-control post" name="post">Lorem Ipsum</textarea>
        </div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
        </a>
        <input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
        </div>
        <div class="form-group" hidden="">
        <label for="postNum">Post Number:</label>
        <input type="text" class="form-control" name="postNum" value="2">
        </div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-3">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label><select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
        <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
        <select class="form-control" name="weekNum" value="4">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected="">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="date">Date:</label>
        <input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
        <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select></div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label>
        <input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a></div>
        <div class="col-12 mt-3"><label for="post">Post:</label>
        <textarea class="form-control post" name="post">Lorem Ipsum</textarea>
        </div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
        </a>
        <input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
        </div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label>
        <input type="text" class="form-control" name="postNum" value="3">
        </div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-3">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
        <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
        <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
        <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select></div>
        <div class="col-6 mt-3"><label for="date">Date:</label>
        <input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
        <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select></div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label>
        <input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a></div>
        <div class="col-12 mt-3"><label for="post">Post:</label>
        <textarea class="form-control post" name="post">Lorem Ipsumdale-az/</textarea>
        </div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;">
        <label for="publishedPostLink">Published Link:</label>
        </a>
        <input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
        </div>
        <div class="form-group" hidden="">
        <label for="postNum">Post Number:</label>
        <input type="text" class="form-control" name="postNum" value="4">
        </div>
      </div>
    </div>
  </div>
</div>
css

1条答案

按热度按时间
rxztt3cl

rxztt3cl1#

这是因为您自己的样式会被包含在页面中的引导样式覆盖。
你需要把你的风格放在 Bootstrap 之后。
一般来说，它们应该具有更高的特异性，或者通过更具体的选择器，或者如果它们具有相同的特异性，则它们应该出现在页面的后面。
有关https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_weight_categories详细信息，请访问www.example.com。

赞(0）分享  回复(0）举报  2023-12-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com