Html 某些div在引导V3中没有正确响应

我有一个问题一直困扰着我一段时间。应该很简单，我就是想不出来

基本上，在Chrome上，更改浏览器大小时，页面上创建的大多数div都会正确调整大小，但也有一些div相互重叠。在768px和991px之间（因此媒体查询），国家蜡像博物馆的博文与都柏林动物园重叠。这种情况会发生在页面下方的其他几篇文章中，但页面的大部分内容都很好

这在Firefox中不是问题

此外，当屏幕低于767px时，大多数div会垂直重叠

我尝试在不同的位置添加

。我尝试了

col-**-4

的不同变体，但没有起到任何作用，我也尝试了修改浮动，但似乎没有任何效果

post HTML的示例：

<div id="post-250" class="post-250 tours type-tours status-publish hentry col-lg-4 col-md-4 tour-thumb element-item" >
<div class="tour-frame">
    <div class="tour-thumb-img">
        <a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">
            <img src="http://loveireland.evolvedublin.com/wp-content/uploads/2014/05/Dublin-Zoo2.jpg"  class="img-responsive" alt=""/>
        </a>
    </div><!--tour-thumb-img-->
    <div class="tour-thumb-text">
        <!--TOUR TITLE-->
        <h2 class="az za"><a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">Dublin Zoo</a></h2>
        <!--TOUR EXCERPT--> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis semper lorem, in volutpat mi adipiscing se                       
            <div class="thumb-footer">
                <div class="tripadvisor">
                    <img src="http://loveireland.evolvedublin.com/wp-content/themes/loveireland/images/trip-advisor-icon.png" class="trip-icon" alt="Trip Advisor Icon" />
                </div><!--trip-advisor-->
                <div class="green-btn">
                    <a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">VIEW TOUR</a>
                </div><!--green-btn-->
            </div><!--thumb-footer-->

            <div class="clearfix clear"></div>

    </div><!--tour-thumb-text-->

</div><!--tour-frame-->

如前所述，这在Firefox中有效，但当屏幕小于767px时，列实际上不会调整大小，这也是一个在Chrome中没有出现的问题，这一点很奇怪

希望有人能帮助我，因为我很困

---

干杯

在您发布的链接中，在div添加位置有css内联：绝对值、左值和顶值，请将其删除或尝试用以下内容覆盖：

@media (min-width: 768px){
    .tour-thumb {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      float: left;
    }
}

---

在@Miktown的帮助下，我在css中添加了以下内容，解决了这个问题：

@media (min-width: 768px) and (max-width: 991px){
    .tour-thumb {
       width:50% !important;
    }

}
@media (max-width: 767px){
    .tour-thumb {
     width:96% !important;
    }

}

---

嗨@Miktown，谢谢你的回复。这有助于确保框准确调整大小，但是，在调整浏览器大小和使用同位素过滤器（这是绝对定位的原因）时，框的重新定位似乎不稳定，而不是像以前那样平滑。顺便说一下，我必须添加一个

浮点：无！重要信息

对于768px以下的屏幕，修复我在最后一段中提到的Firefox问题，但是，这似乎使得在较小的浏览器尺寸上，框也会不稳定地移动。有没有办法使同位素效应再次平滑？我认为这是一个广域的问题。如果你加左：10px！重要的；或宽：90%；不会发生那个小的左移OK，我删除了你上面输入的答案，只是简单地更改了添加到媒体查询中的不同宽度，这似乎解决了问题

@media (min-width: 768px) and (max-width: 991px){
    .tour-thumb {
       width:50% !important;
    }

}
@media (max-width: 767px){
    .tour-thumb {
     width:96% !important;
    }

}