Bootstrap中如何设置元素背景透明以继承父级div背景色

仅给<ul>标签添加bg-transparent类无法实现透明效果，核心原因是Bootstrap默认给.list-group-item设置了白色实色背景，该样式优先级高于父元素继承的透明属性，会直接遮挡父容器背景。

方案1：使用Bootstrap原生工具类（无额外CSS，推荐） #

给所有列表项<li>添加bg-transparent工具类即可，修改后完整代码：

<div class="col-lg-3">
  <ul class="list-group list-group-flush bg-transparent">
    <li class="list-group-item bg-transparent">An item</li>
    <li class="list-group-item bg-transparent">A second item</li>
    <li class="list-group-item bg-transparent">A third item</li>
    <li class="list-group-item bg-transparent">A fourth item</li>
    <li class="list-group-item bg-transparent">And a fifth one</li>
  </ul>
</div>

如果不需要列表项默认的分割边框，可给li标签额外添加border-0类，完全适配父容器样式。

方案2：自定义CSS批量覆盖 #

如果页面存在多处同类型透明列表需求，无需逐个给li加类，可自定义样式覆盖Bootstrap默认规则：

.bg-transparent.list-group .list-group-item {
  background-color: transparent;
  /* 不需要分割边框时取消注释下一行 */
  /* border-color: transparent; */
}

该写法会自动给所有带bg-transparent类的列表组下的子项设置透明背景，原有代码无需修改即可生效。

注意：自定义CSS文件必须在Bootstrap CSS文件之后引入，否则会被框架默认样式覆盖导致不生效。

内容的提问来源于stack exchange，提问作者Abdullah Abd El-khalek