将媒体对象和列表组一起放置

Question

我需要放这样的东西：

<div class="media">
  <img src="..." class="mr-3" alt="...">
</div>

类似这样的顶部：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

在第一列之内：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

在某种程度上，它们可以像唯一的东西那样工作：媒体对象的底部和列表组的顶部连续地彼此组合在一起（两个元素的宽度相同），而该集合的顶部则以空白为零与页面顶部重叠，将固定的导航栏与第三个代码段中放置在容器上方的重叠，然后将导航栏中的nav-items元素推到图像的右侧。

更新2

css：

.navbar {
  z-index: -1;
}
.navbar-nav {
  z-index: 2;
}
.list-group {
  margin-top: -96px;
  z-index: 1;
}

有了这个，navbar依预期保留在list-group后面，但是我无法单击导航栏上的任何链接。

Answer 1

媒体对象的底部和列表组的顶部连续地彼此组合在一起（两个元素的宽度相同）

我刚刚使用了您的代码，这几乎可以奏效

<div class="container-fluid">
  <div class="row">
    <div class="col-sm">
        <div class="media">
          <img src="https://dummyimage.com/200x200/000/fff" class="mr-3" alt="...">
        </div>
        <ul class="list-group" style="width: 200px;">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

您只需要
为图像和ul设置相同的宽度。很抱歉，如果我误解了您的问题，而这不是您想要的。
此外，为什么要通过与图像重叠来隐藏其导航。那您的导航栏有什么作用？