【发布时间】：2020-07-23 05:37:56
【问题描述】：
您好，我正在尝试添加我在 codepen https://codepen.io/konyali/pen/WZQKwG 上找到的这个 portoflio 动画
到我的网站 http://ruben123.com/ 在 portoflio 部分。当我使用包括引导程序在内的所有 CDN 时，一切看起来都很好，但是当我摆脱引导程序 cdn 时，所有图像都变得相同大小并堆叠起来。
我之所以去掉 bootstrap cdn，是因为我不想在自己可以使用 css 网格的情况下将整个框架导入我的网站，只是为了使用网格系统。
问题是我尝试自己添加 css 网格，我认为我做的一切都是正确的，但由于某种原因它无法正常工作。 （我在下面的代码中使用了 Scss）
$('.filters ul li').click(function(){
$('.filters ul li').removeClass('active');
$(this).addClass('active');
var data = $(this).attr('data-filter');
$grid.isotope({
filter: data
})
});
var $grid = $(".grid").isotope({
itemSelector: ".all",
percentPosition: true,
masonry: {
columnWidth: ".all"
}
})#portfolio-animation {
.section {
padding: 30px 0;
color: #333;
.top-side {
text-align: center;
.title {
font-weight: 500;
font-size: 15px;
display: inline-block;
&:after {
content: "";
display: block;
width: 50%;
border-bottom: 1px solid #494949;
margin: 8px auto;
}
}
h2 {
font-weight: 700;
}
}
}
.section.portfolio {
.filters {
text-align: center;
margin-top: 50px;
ul {
padding: 0;
li {
list-style: none;
display: inline-block;
padding: 20px 30px;
cursor: pointer;
position: relative;
&:after {
content: "";
display: block;
width: calc(0% - 60px);
position: absolute;
height: 2px;
background: #333;
transition: width 350ms ease-out;
}
&:hover {
&:after {
width: calc(100% - 60px);
transition: width 350ms ease-out;
}
}
}
li.active {
&:after {
width: calc(100% - 60px);
}
}
}
}
.filters-content {
margin-top: 50px;
.grid {
display: grid;
grid-template-columns: 1rem 1rem 1rem 1rem;
// background-color: #2196F3;
// padding: 10px;
.show {
opacity: 1;
visibility: visible;
transition: all 350ms;
}
.hide {
opacity: 0;
visibility: hidden;
transition: all 350ms;
}
.item {
text-align: center;
cursor: pointer;
margin-bottom: 30px;
.p-inner {
padding: 20px 30px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
h5 {
font-size: 15px;
}
.cat {
font-size: 13px;
}
}
img {
width: 100%;
}
}
}
}
}
} <div id="portfolio-animation" class="py-2">
<section class="portfolio section">
<div class="container">
<div class="top-side">
<!-- <h4 class="title">MY WORKS</h4> -->
<h2 class="section-title">PORTFOLIO</h2>
</div>
<div class="filters">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".corporate">Corporate</li>
<li data-filter=".personal">Personal</li>
<li data-filter=".agency">Agency</li>
<li data-filter=".portal">Portal</li>
</ul>
</div>
<div class="filters-content">
<div class="row grid">
<div class="col-sm-4 all corporate">
<div class="item">
<img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
<div class="p-inner">
<h5>Work 1</h5>
<div class="cat">Corporate</div>
</div>
</div>
</div>
<div class="col-sm-4 all personal">
<div class="item">
<img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
<div class="p-inner">
<h5>Work 1</h5>
<div class="cat">Personal</div>
</div>
</div>
</div>
<div class="col-sm-4 all agency">
<div class="item">
<img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
<div class="p-inner">
<h5>Work 1</h5>
<div class="cat">Agency</div>
</div>
</div>
</div>
<div class="col-sm-4 all portal">
<div class="item">
<img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
<div class="p-inner">
<h5>Work 1</h5>
<div class="cat">Portal</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Portoflio CDN -->
<script src="https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js"></script>更新：我在这里找不到答案，所以我去 codepen 并找到了另一个不使用引导程序的照片库过滤器。
【问题讨论】：
-
我尝试在您的网站上使用 CSS 以使用 CSS 网格布局，但 JavaScript 动画在网格布局中并不流畅。出于这个原因，我可能会坚持对行和列使用 Bootstrap 相关的 CSS。
-
好的，感谢您花时间查看我的网站并使用代码。我尝试下面的代码，如果它不起作用，那么我会尝试这种方法。
-
如何找到并添加引导 css？
标签： html jquery css twitter-bootstrap css-grid