Bootstrap + Wordpress重叠问题

Question

我已经开始潜入主题定制的WP代码，但是我突然看到一个严重的引导列列表，我无法真正找到问题所在。

我为缩略图侧图设计了博客部分col-xs-12 col-sm-4，内容本身设计了col-xs-12 col-sm-8。除了768px-990px​​之外的所有尺寸范围内，一切都很好，并且很宽敞，其中各列开始彼此重叠，与它们彼此应具有的边距大小大致相同。

下面是代码：

<div class="row"> 
     <?php if(has_post_thumbnail()): ?> 
     <div class="col-xs-12 col-sm-4"> 
     <div class="thumbnail-img"><?php the_post_thumbnail('medium'); ?> 
     </div> 
     </div> 
     <div class="col-xs-12 col-sm-8"> 
      <p><?php the_content(); ?></p> 
     </div> 
     <?php else: ?> 

     <div class="col-xs-12"> 
      <p><?php the_content(); ?></p> 
     </div> 

     <?php endif ?> 
     </div> 

这里有几张照片以强调：

编辑：

我改变了，只是为了检查，如果改为8-4行，我会做一个6-6，它会很好（图片如下）。不是8 + 4 = 12？我在这里错过了什么？

Answer 1

尝试给图像宽度100％，以便在调整大小时适合div。

或创建一个小提琴和共享链接。

Answer 2

我发现wordpress并不能很好地与bootstrap配合使用，因为the_post_thumbnail('$string')会与bootstrap列网格重叠（如果它们没有正确设置）（WP不会自动将图像宽度设置为列限制区域。 ）

the_post_thumbnail('$string')接收下面的一组PARAMS：

• the_post_thumbnail('thumbnail'); //缩图（150×150硬裁剪）
• the_post_thumbnail('medium'); //中等分辨率（300×300 最大高度3 00px）
• the_post_thumbnail('medium_large'); //中大（在WP加入 4.4）分辨率（768×1 0无限高）
• the_post_thumbnail('large'); //大分辨率（1024× 1024最大高度1,024像素x）
• the_post_thumbnail('full'); //完整分辨率（原 尺寸上传）

没有为the_post_thumbnail('$string')没有100％但我只是猜测，它可以被硬编码到函数本身当作一个PARAM。

我的解决方案是使用$string = thumbnail或将网格更改为col-sm-6这两列。

Answer 3

使用img-responsive类将图像的url放在img标签中。