Question

因此，我尝试在yii2项目中使用bootstrap 4.1主题。事实是，它使我的容器像它们一半的宽度一样重叠。我使用的类来自引导程序。出现问题的图片：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/

主题的引导代码： 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。该代码还设置了一个固定高度，而您想要一个动态高度，因为引导程序不提供固定宽度的容器。改进的代码将宽度设置为“ 100％”，将高度设置为尊重长宽比的值（“自动”）。图片的最大宽度为“ 200px”（是的，请尝试将头部环绕）。

“宽度”表示图像的宽度应为“ 200px”，但“最大宽度”值表示图像不能大于第一个放置的父图像的“ 100％”（在本例中为列）。因此，在“ 400px”列中可以为“ 200px”，但在“ 133px”列中为“ 133px”。

希望这会有所帮助！

重叠的容器

1 个答案: