将面包屑定位到标题的底部答案

【问题标题】：Position breadcrumbs to the bottom of the header将面包屑定位到标题的底部
【发布时间】：2021-04-02 09:12:38
【问题描述】：

我正在尝试将我的面包屑和页面标题定位到标题图像的底部。

所以我有一个英雄图像，它是一个图像，高度是 400 像素。一行应该有 2 个 div，一个是左边的标题，另一个是面包屑应该在右边。但标题和面包屑也应该在底部，因此与容器相比，宽度变得更小。我想要与容器大小相同的宽度。

.hero-image .hero-bottom {
  position: absolute;
  bottom: 0;
}

.hero-image ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
}

.hero-image ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

.hero-image ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

.hero-image ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

.hero-image ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

<div class="hero-image">
  <div class="container">
    <div class="hero-bottom">
      <div class="row">
        <div class="col-6" style="background-color:#aaa;">
          <h2>Title of the page</h2>
        </div>
        <div class="col-6" style="background-color:#bbb;">
          <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Pictures</a></li>
            <li><a href="#">Summer 15</a></li>
            <li>Italy</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css responsive breadcrumbs

【解决方案1】：

你能检查下面的代码吗？希望它对你有用。我们在.hero-bottom 中添加了width:100%;，并将position:relative 赋予.container，因此.hero-bottom 的宽度和位置将相对于.container 设置

请参考此链接：https://jsfiddle.net/yudizsolutions/cxqk3mn0/1/

.hero-image {
  height: 400px;
  position: relative;
}

.hero-image .container {
  position: relative;
  height: 100%;
}

.hero-image .hero-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.hero-image ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
}

.hero-image ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

.hero-image ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

.hero-image ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

.hero-image ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="hero-image" style="background:url('https://dummyimage.com/1920x1080/000/fff');">
  <div class="container">
    <div class="hero-bottom">
      <div class="row justify-content-between">
        <div class="col-6" style="background-color:#aaa;">
          <h2>Title of the page</h2>
        </div>
        <div class="col-6" style="background-color:#bbb;">
          <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Pictures</a></li>
            <li><a href="#">Summer 15</a></li>
            <li>Italy</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的解决方案。