bootstrap网格布局笔记

最新推荐文章于 2025-10-12 09:29:26 发布

原创最新推荐文章于 2025-10-12 09:29:26 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Bootstrap网格布局的基本原理，特别强调了在不指定列数时的平均分配策略，以及如何解决12列无法平分为特定比例如5:7的问题。同时，文章讨论了在网格中嵌套图片可能出现的显示问题，并提供了两种解决方案：为图片添加响应式类，或者通过添加flex布局来实现对齐。

bootstrap网格布局笔记

col-*不写列数时会平分

可以解决12列不能平分成5、7份这样的问题

在这里插入图片描述

<div class="container-fluid">
        <div class="row no-gutters">
            <div class="col"><img class="img-fluid" src="1.jpg"></div>
            <div class="col"><img class="img-fluid" src="1.jpg"></div>
            <div class="col"><img class="img-fluid" src="1.jpg"></div>
            <div class="col"><img class="img-fluid" src="1.jpg"></div>
            <div class="col"><img class="img-fluid" src="1.jpg"></div>
        </div>
    </div>

嵌套图片，不能正常显示

例一：

在这里插入图片描述

解决：在图片上加w-100 h-100，可以避免
在这里插入图片描述

例二：

在这里插入图片描述

解决：不对齐的那一个row增加flex布局

在这里插入图片描述

代码：

   <div class="row no-gutters">
               <div class="col-5 col-sm-5 d-flex flex-column">
                   <div class="row no-gutters flex-fill">
                       <div class="col-12 p-1">
                           <img class="img-fluid w-100 h-100" src="31.png">
                       </div>
                   </div>
                   <div class="row no-gutters flex-fill">
                       <div class="col-12 p-1">
                           <img class="img-fluid w-100 h-100" src="31.png">
                       </div>
                   </div>
               </div>
               <div class="col-7 col-sm-7 p-1">
                   <img class="img-fluid w-100 h-100" src="3.jpg">
               </div>
           </div>