Question

我正在使用bootstraper和同位素js构建投资组合网站。我有container div。在桌面浏览器视图中container在一行中包含3个div并且看起来都很好，但是当分辨率发生变化且div的数量减少时（每行少于2个） - 在这种情况下，div不会居中。

<div id="container" class="clearfix isotope" style="position: relative; overflow: hidden; height: 680px;">
    <div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px) scale(1, 1); opacity: 1;">
        <div class="view view-first">
            //content
        </div>
    </div>

    <div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(320px, 0px) scale(1, 1); opacity: 1;">
        <div class="view view-first">
            //content
        </div>
    </div>

    <div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(640px, 0px) scale(1, 1); opacity: 1;">
        <div class="view view-first">
            //content
        </div>
    </div>

    <div class="element item col-md-4 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 340px) scale(1, 1); opacity: 1;">
        <div class="view view-first">
            //content
        </div>
    </div>
</div>

你如何解决这个问题？

Answer 1

实际上，您的代码在您的问题中呈现的方式不起作用或格式良好。第二个</div>中是否存在迷路结束标记<div class="element item col-md-4 isotope-item"？

我jsfiddled it here和style="position: absolute; left: 0px; top: 0px;会将每个容器重叠到左上角。

如果您查看that bootstrap example代码，您会注意到指定容器的行为，因为dirrenent视口大小如此：

<div class="col-6 col-sm-6 col-lg-4">

我建议您阅读bootstrap grid-options，以便更好地理解如何使用它。

希望这有帮助

中心容器div以不同的分辨率

1 个答案: