Расположение медиа-объекта и списка группы вместе

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. Извините, если я неправильно понял ваш вопрос, и это не то, что вы искали .

Кроме того, зачем вам скрывать навигацию, накладывая ее на изображение. Тогда какой цели служит ваш navbar?

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, поэтому использование li-list-group-item в css).