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

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>

在某种程度上，它们可以像一件事一样工作，媒体对象的底部和列表组的顶部连续地贴合在一起(两个元素的宽度相同(，而这个集的顶部与页面的顶部之间的边距为零，与第三段代码中放在容器上方的固定导航条重叠，并将导航条内的CCD_ 1元素推到图像的右侧。

更新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设置相同的宽度如果我误解了你的问题，我很抱歉，这不是你想要的。

还有为什么你想通过将导航与图像重叠来隐藏导航。那么你的导航栏有什么用途？

Answer 2

我使用以下css样式解决了这个问题：

.list-group {
margin-top: -128px;
width: 180px;
}
li.list-group-item {
padding: 0;
}
.media img {
padding: 0;
}
.bd-placeholder-img {
padding: 0;
}

我把media object放在list-group的第一个项目中(其他项目是链接a.list-group-item，因此在css中使用li-list-group-item(。