美好的一天,我的目标是对齐所有图像并在我的12网格引导栏中进行测试。我将其分为6、4和2,但2列中的图标与其他列的长度不匹配。我有当前图像和打算创建的布局。
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
答案 0 :(得分:2)
您可以将class="img-responsive"
类添加到<img>
标签中,以创建响应式图像。请查看下面的更新代码:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>