1

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

所以我有一个英雄图像，它是一个图像，高度是 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>

4

1 回答 1

0

你能检查下面的代码吗？希望它对你有用。我们已经添加width:100%;并.hero-bottom赋予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>

于 2021-04-02T11:14:03.360 回答