内容摘要：用Bootstrap把两个div塞进一行，最省事的办法是给它们套一个.row父容器，然后各自加上.col类。就这么简单。但很多人第一次写的时候会忘掉.row，直接把两个.col-6扔在普通div里，结

用Bootstrap把两个div塞进一行，最省事的办法是给它们套一个.row父容器，然后各自加上.col类。就这么简单。但很多人第一次写的时候会忘掉.row，直接把两个.col-6扔在普通div里，结果它们照样各占一行，然后开始怀疑人生。

我见过一个刚入行的前端，调了半小时没搞定，最后发现是父级少了row。Bootstrap的栅格系统依赖三层结构：容器（container或container-fluid）、行（row）、列（col）。列必须住在行里，行必须住在容器里。少一层，栅格就不干活。

最基础的写法

<div class="container"> <div class="row"> <div class="col-6">左边</div> <div class="col-6">右边</div> </div> </div>

两个col-6各占12列中的6列，加起来正好12，排成一行。如果你写成col-6和col-4，加起来10，它们也在一行，右边会空出2列的宽度。但要是col-7加col-7呢？加起来14超过12，第二个div就被挤到下一行去了。这是栅格系统的基本算术。

不想算数？用col自动分配

只写.col不带数字，Bootstrap会把行内剩余空间平分。两个.col各占一半，三个各占三分之一，四个各占四分之一。这招在列数不固定的时候特别好使。比如你从后端拿到一个数组，长度可能是2也可能是5，前端循环渲染时全用.col就行，不用动态拼类名。

<div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> </div>

三个div等宽，自动排一行。

响应式：不同屏幕不同行为

实际项目里很少让两个div在所有屏幕尺寸下都死守一行。手机上并排两个div，每个宽度不到180px，内容稍微长一点就溢出。通常的做法是用col-12 col-md-6：小屏幕各占满一行，中等屏幕以上才并排。

<div class="row"> <div class="col-12 col-md-6">左</div> <div class="col-12 col-md-6">右</div> </div>

断点md默认是768px。窗口宽度小于768时，两个div上下堆叠；大于等于768时，左右并排。这个模式在后台管理系统的表单页面里到处都是——左边标签右边输入框，手机上一上一下，桌面上左右对齐。

几个容易踩的坑

.row自带负的左右margin（Bootstrap 4是-15px，Bootstrap 5是calc(var(--bs-gutter-x) * -.5)）。你把.row直接放进一个没有padding的div里，列内容会贴到屏幕边缘，看起来像没对齐。解决方法是外面套.container，或者给父级加px-3之类的内边距。

另一个坑是列内容溢出。两个col-6里如果放了超宽的表格或pre标签，内容会撑破列宽，把布局搞乱。这时候得给列加overflow-hidden或者text-truncate，看具体需求。

还有人习惯用float: left加宽度百分比来实现两列并排，然后奇怪为什么Bootstrap的.row和.col不生效——因为Bootstrap 4开始栅格已经改用flexbox了，.row本身就是display: flex，你再加float反而添乱。

说到底，Bootstrap栅格的逻辑就一句话：行是flex容器，列是flex项目，12列制做宽度分配。记住这个，两个div一行也好，三个div一行也好，响应式切换也好，都是同一套规则在跑。