为何两个元素未处于同一行？Bootstrap 4布局问题咨询

我来帮你排查下可能的问题，以及对应的解决办法：

1. 响应式断点的限制 #

你用的col-lg-2和col-lg-1是Bootstrap针对屏幕宽度≥992px的大屏断点设计的类。如果你的浏览器窗口宽度小于这个阈值，Bootstrap会自动让这两个列堆叠显示，不会保持同行。

解决办法：
如果你希望在更小屏幕上也维持并排布局，可以添加更小断点的列类，比如适配中等屏幕的col-md-*，或者适配所有屏幕的col-*：

<div class="container">
  <div class="row">
    <div class="col-2 col-lg-2">
      <a class="logo"><img class="logo__img" src="./img/logo.png"/></a>
    </div>
    <div class="col-1 col-lg-1 hamburger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

2. 自定义CSS干扰了Flex布局 #

你提到了.hamburger span的CSS，要重点检查你的.hamburger、.logo或.logo__img有没有设置以下属性——这些会破坏Bootstrap的flex布局逻辑：

• float: left/right：Bootstrap的row基于flex布局，float会失效并导致布局错乱
• width: 100%：子元素的100%宽度可能撑爆列的分配空间
• 未限制的图片宽度：如果logo__img没设置最大宽度，很可能会撑大col-lg-2的宽度，导致两个列放不下同一行

给图片加个自适应样式就能解决这个问题：

.logo__img {
  max-width: 100%;
  height: auto;
}

3. 未正确引入Bootstrap核心CSS #

如果你的页面没加载Bootstrap 4的CSS文件，row和col-*类的布局样式根本不会生效，自然无法实现并排。请确保在页面<head>里正确引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

4. 意外覆盖了Bootstrap的默认边距 #

Bootstrap的row默认有margin-left: -15px和margin-right: -15px，col-*类则用padding-left/right:15px抵消这个负边距。如果你的自定义CSS强行覆盖了这些样式，也会导致布局错乱，比如：

/* 这类样式要避免 */
.row {
  margin: 0 !important;
}
.col-lg-2, .col-lg-1 {
  padding: 0 !important;
}

你可以先从检查屏幕宽度和图片自适应样式开始，这两个是最常见的触发原因~

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