重叠的容器

Question

所以，我尝试在我的 yii2 项目中使用 bootstrap 4.1 主题。问题是，它使我的容器重叠了一半的宽度。我使用的类来自 bootstrap。有问题的图片：https://imgur.com/q0O9jhK 我的代码和类:

 <div class="col-sm-6 col-lg-4" style="text-align:center;">
     <div class="thumbnail">          
         <div class="caption" style="align-items: center;">        
            <img style="width=200 height=300"><?=HtmlPurifier::process($model->thumnail)?></img>
            <h4 class="overme"><?=Html::encode ($model->title)?></h4>
            <p>
               <?=Html::a('More Informations', ['/library/books/detail', 'id' => $model->id], ['class'=>"btn btn-md
 btn-primary"])?>
            </p>
         </div>
     </div>
 </div>

站点和主题： https://bootswatch.com/cerulean/

主题的bootstrap代码： https://bootswatch.com/4/cerulean/bootstrap.css

Answer 1

改变这个：

<img style="width=200 height=300" src="..." />

进入这个：

<img style="width: 200px; height: auto; max-width: 100%;" src="..." />

第一个代码无效CSS。该代码还设置了固定高度，而您需要动态高度，因为 bootstrap 不提供固定宽度的容器。改进后的代码将宽度设置为“100%”，将高度设置为符合纵横比的值 ('auto')。图像的最大宽度是“200px”（是的......试着绕过它）。

'width' 表示图像宽度应为“200px”，但 'max-width' 值表示图像不能大于第一个定位父级的“100%”（在此案例列）。因此它可以在“400px”列中为“200px”，但在“133px”列中为“133px”。

希望对您有所帮助！

重叠的容器

Containers who overlap

css

yii2-advanced-app

bootstrap-4