将面包屑定位到 header 的底部

Question

我正在尝试将面包屑导航和页面标题放置在 header 图片的底部。

所以我有一个 hero-image 这是一个图像，高度是 400px。一行中应该有 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: "/[=11=]a0";
}

.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>

Answer 1

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

请参考这个link：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: "/[=10=]a0";
}

.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>

将面包屑定位到 header 的底部

Position breadcrumbs to the bottom of the header

html

css

breadcrumbs

responsive