Bootstrap + Wordpress overlapping coloumn issue

Question

Я начал погружаться в WP-код для настройки темы, но я вдруг увидел серьезный столбец бутстрапа fla, где я не могу найти проблему.

Я разработал раздел блога как 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> 

Вот несколько фотографий, чтобы подчеркнуть:

EDIT:

Я изменил, просто чтобы проверить, что произойдет, если вместо 8-4 строки я сделаю 6-6, и он отлично работает (рисунок включен ниже). не 8 + 4 = 12? что мне здесь не хватает?

Answer 1

Попробуйте задать ширину изображения на 100%, чтобы он поместился в div при изменении размера.

Или создать скрипку и поделиться ссылкой.

Answer 2

Я обнаружил, что Wordpress не очень хорошо играет с загрузкой, так как the_post_thumbnail('$string') будет перекрывать сетку бутстрапов, если они не установлены правильно (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 х 0 бесконечная высота)
• the_post_thumbnail('large'); // Большое разрешение (1024 х 1024 максимальная высота 1024px)
• the_post_thumbnail('full'); // Полное разрешение (оригинал размера загружен)

Там нет 100% для the_post_thumbnail('$string') пока я просто предполагаю, что это может быть зашито в функцию себя как пары.

Моим решением было либо использование $string = thumbnail, либо изменение сетки на col-sm-6 для обеих колонок.

Answer 3

Укажите URL-адрес изображения в теге img с классом img-responsive.