Bootstrap 4网格系统故障求助：新手卡壳第二行布局

兄弟/姐妹，太懂这种对着网格卡3小时的崩溃感了！我当初刚用Bootstrap的时候也在第二行布局栽过好几次跟头，给你捋几个最常见的坑，你对照着排查下：

• 第一行高度不一致导致的错位：如果第一行的各个列高度不一样，Bootstrap的网格会自动把下一行的元素塞到上一行的空隙里，直接打乱布局。试试在第二行的.row前面加个<div class="clearfix"></div>，或者给第一行的.row加上align-items-stretch让所有列高度统一，这样第二行就能乖乖对齐了。
• 自定义margin/padding打破网格规则：Bootstrap的列是靠内置的padding来控制间距的，如果你给粉色区块对应的列加了自定义的margin-left/margin-right，或者把padding设得过大，很容易让列的总宽度超出12格，导致换行或者错位。检查下你的自定义CSS，把这类样式先注释掉试试。
• 断点使用不当：仪表盘一般是面向桌面端的，如果你用了col-md-*这类中等屏幕的断点，在更大的屏幕上可能会出现布局错乱。换成col-lg-*或者col-xl-*试试，确保在目标屏幕尺寸下列的宽度是符合预期的。
• 嵌套网格没遵循规则：如果粉色区块是嵌套在某个列里面的子布局，一定要记得在列里面先套一个.row，再在里面放col-*元素。直接在列里放列会因为没有负margin的支撑，导致间距和对齐全乱。

要是排查完这些还是不行，把你第二行布局的HTML代码（包括对应的自定义CSS）贴出来，我帮你盯着看细节！

内容的提问来源于stack exchange，提问作者Paula