如何解决为什么我的行不居中且每行包含3张图像?
我正在使用Bootstrap 4创建Web应用程序。每当尝试创建两行3张图像(使用Bootstraps rows class和col-lg-6等)时,这些行都偏离中心,而不是偏离中心占满整列。我将提供一张图片以供参考。
我做错了什么?
HTML:
<div class="jumbotron">
<div class="text-center" style="padding: 0px; font-size: 25px;">
<a class="ins-ic mr-3" role="button" href="https://www.instagram.com/meachwellness/" target="_blank">Follow Me On Instagram <i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="container">
<div class="row">
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/100793236_309846580171027_6339133455916718389_n.jpg?_nc_cat=103&_nc_sid=8ae9d6&_nc_ohc=VGXmOlICiXgAX_3Su8z&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=2eae9cdca184910f526a92df6f818805&oe=5F577D9A class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/94751395_114199943384141_875238855374942114_n.jpg?_nc_cat=101&_nc_sid=8ae9d6&_nc_ohc=53eSQv_S12YAX9nihYy&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=ae42926f97b49e70f5c5b8cc59c86c0f&oe=5F5909FB class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/82718694_796794264120245_396641677005846547_n.jpg?_nc_cat=111&_nc_sid=8ae9d6&_nc_ohc=2lBpQZZWhkIAX_kX2rG&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=d8a7c1474f6434cab5fe7c224eb14bc9&oe=5F590740 class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
</div>
<div class="row">
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/79307404_531685410779846_6162666899133503165_n.jpg?_nc_cat=111&_nc_sid=8ae9d6&_nc_ohc=oN5cGCUMoyoAX_4qcGV&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=4e83bfe7d58056f17071f04bf7817a14&oe=5F56089B class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/82753023_1032181673805443_398773380568275504_n.jpg?_nc_cat=104&_nc_sid=8ae9d6&_nc_ohc=bk_PvsocLJMAX8nKDKG&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=223c553739090a16218d12ca406b4aa0&oe=5F58AEF1 class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
<a href="https://www.instagram.com/meachwellness/" target="_blank">
<div class="col-lg-4 col-sm-12 thumb">
<img id="img-1" src=https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/79961640_169449397794681_2497375706846442871_n.jpg?_nc_cat=109&_nc_sid=8ae9d6&_nc_ohc=GTgJ1lhq_-cAX9EtSog&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=c72e68bd61ad8bb3ae0416504327fd95&oe=5F57A1E2 class="image rounded float-left" alt="..." style="width: 250px; height: 250px; object-fit: cover;">
</div>
</a>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。