Bootstrap 3：移动设备上的缩略图上的两列文字

Question

我正在开发一个博客模板，但我的手机浏览器出现问题。

以下是问题的屏幕截图。

正如您所看到的那样，文字遍布缩略图。

以下是代码：

<div class="container">
    <div class="row">

<div class="col-sm-8">

<div class="post-list">
    <?php $myposts = get_posts( 'numberposts=-1' );
    foreach( $myposts as $post) : setup_postdata( $post ) ?>

        <div class="media" style="margin-bottom:40px;">
          <div class="media-left img-responsive">
            <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>
            </a>
          </div>
          <div class="media-body">
            <div style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding-top:10px;">
                <h3 class="media-heading"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <p><?php the_date(); ?></p>
            </div>
            <p>
             <?php the_excerpt(); ?>
            </p>
          </div>

        </div>

    <?php endforeach; ?>
</div>

 </div>

  <div class="col-sm-3">

  <h1>Right column here</h1>

  </div>


  </div>
</div>

有关如何解决此问题的任何想法？

Answer 1

请勿在同一个班级中混用.media-left和.img-responsive。

另外，我建议在.media-object中使用the_post_thumbnail()课程。