Html 某些div在引导v3中没有正确调整大小

Html 某些div在引导v3中没有正确调整大小,html,css,responsive-design,twitter-bootstrap-3,Html,Css,Responsive Design,Twitter Bootstrap 3,我有一个问题一直困扰着我一段时间。应该很简单,我就是想不出来 基本上,在Chrome上,更改浏览器大小时,页面上创建的大多数div都会正确调整大小,但也有一些div相互重叠。在768px和991px之间(因此媒体查询),国家蜡像博物馆的博文与都柏林动物园重叠。这种情况会发生在页面下方的其他几篇文章中,但页面的大部分内容都很好 这在Firefox中不是问题 此外,当屏幕低于767px时,大多数div会垂直重叠 我尝试在不同的位置添加。我尝试了col-**-4的不同变体,但没有起到任何作用,我也尝试

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

基本上,在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中没有出现的问题,这一点很奇怪

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


干杯

您有这个带标签的引导程序,但我没有看到正在实施的专栏系统?您好@cclark413。它在示例中给出的第一个div中实现:
class=“250次旅行后类型旅行状态发布hentry col-lg-4 col-md-4 tour thumb元素”>
。在现场,它位于立柱周围的所有分区上。
.tour-thumb{
margin: 0 0 30px 0;
}

.tour-frame{
border: 1px solid #e5e5e5;
background-color:#ffffff;
height:100%;
}

.tour-thumb-text{
padding: 0 10px 20px 10px;}

.tour-thumb a{
text-decoration:none;}

@media(max-width:767px){}
@media(min-width:768px){.tour-thumb{max-width: 357px !important; height: 390px;}}
@media(min-width:992px){.tour-thumb{max-width: 233px !important; height: 350px;}}
@media(min-width:1200px){.tour-thumb{max-width: 290px !important; height: 350px;}}

.tour-thumb h2{
font-size:12px;
font-weight:bold;
text-transform: uppercase;}

.tour-thumb h2 a{
color: #000000;
letter-spacing:2px;}

.tour-thumb h2 a:hover{
text-decoration:underline;}

.tour-thumb p{
font-size:14px;
letter-spacing:1px;}

.tour-thumb-img{
position:relative;}

.tour-thumb-price{
background: rgb(255,255,255);
background: rgba(255,255,255,0.9);
/*box-shadow: 0px 0px 10px #999999;*/
border: 1px solid #e5e5e5;
border-top: none;
position: absolute;
top:0;
right: 10px;
text-align:center;
padding: 10px;}

.tour-thumb-price h3{
font-size:18px;
font-weight:bold;
color:#8ac736;
padding: 0 0 0 0;
margin: 0 0 0 0;}

.tour-thumb-price p{
font-size:8px;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 0 0;}

.thumb-footer{
display:block;
padding-top:10px;}

.tour-thumb .social{
display:inline-block;
float:left;
padding: 6px 0 6px 0;}

.tour-thumb .social img{
border:none;
margin-right:10px;}

.tour-thumb .social a{
color: #ffffff;}

.tour-thumb .green-btn{
float:right;
position:absolute;
right:20px;
/*margin-top:13px;*/}

.tour-thumb .tripadvisor{
/*margin-bottom:30px;*/
float:left;}

.tripadvisor img.trip-icon{
display:inline-block;
margin-top:4px;
float:left;}

.TA_cdsratingsonlynarrow{
display:inline-block;
float:left;}

.tour-detail .cdsROW.narrow{
text-align:left !important;
background-color:#fafafa; !important}

.tour-thumb .cdsROW.narrow{
text-align:left !important;
background-color:#ffffff; !important}