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標籤中。