Bootstrap + Wordpress重叠列问题

Question

我已经开始深入使用WP代码进行主题定制，但是我突然看到一个严重的bootstrap列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>

以下是一些需要强调的图片：

  

修改

我改变了，只是为了检查，如果改为8-4行会发生什么，我会做6-6，并且效果很好（图片包含在下面）。不是8 + 4 = 12？我在这里想念的是什么？

Answer 1

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

或者创建一个小提琴并分享链接。

Answer 2

我发现wordpress与bootstrap并没有很好地协同工作，因为the_post_thumbnail('$string')如果没有设置正确的话，the_post_thumbnail('$string')将与引导列网格重叠（WP不会自动将图像宽度设置为列限制区域。）

the_post_thumbnail( 'thumbnail' );收到以下设置参数：

• the_post_thumbnail( 'medium' ); //缩略图（150 x 150硬裁剪）
• the_post_thumbnail( 'medium_large' ); //中等分辨率（300 x 300最大高度300px）
• the_post_thumbnail( 'large' ); //中等大小（在WP中添加 4.4）分辨率（768 x 0无限高度）
• the_post_thumbnail( 'full' ); //大分辨率（1024 x 1024最大高度1024px）
• the_post_thumbnail('$string') //全分辨率（原创 尺寸已上传）

$string = thumbnail没有100％但我只是猜测它可以作为参数硬编码到函数本身。

我的解决方案是使用col-sm-6或将网格更改为var myApp = angular.module('myApp', []); myApp.controller('TodoCtrl', function($scope) { $scope.comments = [ { type: 'one' }, { type: 'two' }, { type: 'three' }, { type: 'four' } ] });两列。

Answer 3

将图像的网址放在带有img-responsive类的img标记中。