求助：Bootstrap为何自动为ul元素添加margin样式？

嘿，我来帮你拆解这个问题～

首先，Bootstrap的list-group组件本身就自带默认的外边距（margin）样式，这是框架预设的排版规范，目的是让列表和页面里的其他元素保持合理的间距，避免视觉上过于拥挤。

具体原因拆解 #

看你用到的list-group类，Bootstrap的默认样式里对它有这样的设置：

.list-group {
  margin-bottom: 1rem;
}

而且你的<ul>直接嵌套在container容器里，虽然container主要是左右padding，但核心的多余margin还是来自list-group的默认配置，如果你没在自定义CSS里覆盖这个样式，就会出现你看到的有margin的效果。

再看你的HTML结构：

• CompanyX.com
• Hey: Peter G.

快速解决办法 #

你有两个简单的方式去掉这个多余的margin：

• 方式1：自定义CSS覆盖
  针对这个特定的list-group写样式，精准覆盖默认值：

  .header .container .list-group {
    margin-bottom: 0;
    /* 如果需要清除所有方向的margin，直接写 margin: 0; 就行 */
  }
  

• 方式2：用Bootstrap自带工具类
  Bootstrap提供了现成的间距工具类，比如mb-0（意思是margin-bottom: 0），直接加到<ul>上就行，不用额外写CSS：

  <ul class="list-group mb-0">
    <!-- 你的列表项内容 -->
  </ul>
  

另外提一句，你列表项里的right类如果是用来做右对齐的，记得确认父元素有没有清除浮动的处理，但这和当前的margin问题关系不大，主要还是list-group的默认样式在起作用～

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