Jquery Isotope - 无法将容器内的多个 div 居中 - Isotope 导致了这个问题
Jquery Isotope - Unable to center multiple divs inside a container - Isotope causes the issue
我正在使用 Bootstrap 和 PHP 的组合来创建投资组合部分。
我有大约 12 个项目,我想在每一行显示其中的 4 个。
问题是无论我做什么,单位都粘在容器的左侧,我似乎无法将它们居中,即使在 SO 上进行了所有搜索。
这是我正在使用的代码。
HTML
<section class="wow fadeInUp animated" data-wow-offset="200" id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="filter">
</div>
<div class="thumb-container" >
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
</div>
</div>
</section>
CSS
.container{
width: 70%;
}
#portfolio{
height: 100%;
background-color: white;
padding-bottom: 50px;
}
#portfolio .filter{
height: 50px;
text-align: center;
background: transparent;
border-top: 1px solid #7f8c8d;
border-bottom: 1px solid #7f8c8d;
width: 100%;
margin-top: 30px;
}
.thumb-container{
width: 100%;
margin: 15px auto;
text-align: center;
background: red;
}
.thumb-unit{
width: 300px;
height: 225px;
display: inline-block;
margin: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
background: blue;
}
在这个世界上,我如何才能将 thumb-units 置于 thumb-container 的中心?
非常感谢任何帮助。
编辑
奇怪的是,在 JSFiddle 上它有效,但我不明白为什么它在我的上不起作用。
尝试刷新缓存,换个浏览器,结果还是一样
编辑 2
我发现问题出在 isotope,我用于过滤的库。
有人遇到过这个问题吗?
它看起来居中对齐,但是...如果您正在使用 Bootstrap,为什么不尝试使用此 Bootstrap 组件?
http://getbootstrap.com/components/#thumbnails-custom-content
您的 css 代码会更短。
.container{
width: 70%;
display:block;
margin:0 auto;
float:none
}
/**************************
**************************/
我使用的是 jquery isotope - 这导致了问题。
我切换到 MixItUp 现在一切正常!
我正在做一些恰恰需要它的事情。您需要使用 isotope v2 并使用元素大小调整新功能。
在 jQuery 你会 运行:
var $container = $('#container').isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer'
},
isFitWidth: true
});
你的 html 看起来像这样:
<div class=container">
<div class="row">
<div id="container">
<div class="grid-sizer col-sm-2 col-md-4 col-lg-3"></div>
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
</div>
</div>
</div>
这不仅会使您的布局居中,而且还会响应。 grid-sizer
将是你的 columnWidth,它会根据你的 bootstrap classes col..."
改变它的宽度,使整个事情像你期望的那样响应 bootstrap ,除此之外,您将在每一行中看到的元素数量将基于您的 bootstrap class 设置。
我正在使用 Bootstrap 和 PHP 的组合来创建投资组合部分。
我有大约 12 个项目,我想在每一行显示其中的 4 个。
问题是无论我做什么,单位都粘在容器的左侧,我似乎无法将它们居中,即使在 SO 上进行了所有搜索。
这是我正在使用的代码。
HTML
<section class="wow fadeInUp animated" data-wow-offset="200" id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="filter">
</div>
<div class="thumb-container" >
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
<div class='thumb-unit'></div>
</div>
</div>
</section>
CSS
.container{
width: 70%;
}
#portfolio{
height: 100%;
background-color: white;
padding-bottom: 50px;
}
#portfolio .filter{
height: 50px;
text-align: center;
background: transparent;
border-top: 1px solid #7f8c8d;
border-bottom: 1px solid #7f8c8d;
width: 100%;
margin-top: 30px;
}
.thumb-container{
width: 100%;
margin: 15px auto;
text-align: center;
background: red;
}
.thumb-unit{
width: 300px;
height: 225px;
display: inline-block;
margin: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
background: blue;
}
在这个世界上,我如何才能将 thumb-units 置于 thumb-container 的中心? 非常感谢任何帮助。
编辑
奇怪的是,在 JSFiddle 上它有效,但我不明白为什么它在我的上不起作用。 尝试刷新缓存,换个浏览器,结果还是一样
编辑 2
我发现问题出在 isotope,我用于过滤的库。
有人遇到过这个问题吗?
它看起来居中对齐,但是...如果您正在使用 Bootstrap,为什么不尝试使用此 Bootstrap 组件?
http://getbootstrap.com/components/#thumbnails-custom-content
您的 css 代码会更短。
.container{
width: 70%;
display:block;
margin:0 auto;
float:none
}
/**************************
**************************/
我使用的是 jquery isotope - 这导致了问题。
我切换到 MixItUp 现在一切正常!
我正在做一些恰恰需要它的事情。您需要使用 isotope v2 并使用元素大小调整新功能。
在 jQuery 你会 运行:
var $container = $('#container').isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer'
},
isFitWidth: true
});
你的 html 看起来像这样:
<div class=container">
<div class="row">
<div id="container">
<div class="grid-sizer col-sm-2 col-md-4 col-lg-3"></div>
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-3">
</div>
</div>
</div>
这不仅会使您的布局居中,而且还会响应。 grid-sizer
将是你的 columnWidth,它会根据你的 bootstrap classes col..."
改变它的宽度,使整个事情像你期望的那样响应 bootstrap ,除此之外,您将在每一行中看到的元素数量将基于您的 bootstrap class 设置。