Bootstrap面包屑在图像顶部

Question

早上好，我创建前端我们的网站组合，我需要一些帮助（在头部不适合=））

问题是：我需要使用面包屑和图像开发标题

我知道图片上的父级必须有position: relative和孩子（面包屑）position: absolute但是没有帮助:(

我的代码：http://codepen.io/Yummy9522/pen/aBMKea

P.S。面包屑必须像容器一样放入容器中，例如＆＃39;和＆＃39;观点＆＃39;

Answer 1

我删除了一些样式并添加新属性以这种方式更改您的CSS，您必须将bottom:0;设置为此.ag_portfolio_inform_2类和width:100%;

.ag_portfolio_logo {
	position: relative;
}
.ag_portfolio_logo img {
	width: 100%;
	height: auto;
}
.ag_portfolio_inform_2 {
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
}
.ag_portfolio_inform_2 > .container {
	position: relative;
}
.ag_portfolio_inform {

}
.ag_portfolio_inform .breadcrumb {
	padding: 8px 15px 8px 0;
	border-radius: 0;
	background-color: transparent;

}
.ag_portfolio_inform .breadcrumb li a {
	font-size: 15px;
	color: #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="ag_portfolio_logo">
        <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt="">
        <div class="ag_portfolio_inform_2">
          <div class="container">
            <div class="ag_portfolio_inform">
              <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li class="active">Globuz</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

Answer 2

尝试使用此css

.ag_portfolio_inform {
    position: absolute;
    top: 165px !important; /* give custom height */
    left: 100px;
}
.ag_portfolio_inform_2{
  width: 100%;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="ag_portfolio_logo">
        <img src="http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg" alt="">
        <div class="ag_portfolio_inform_2">
          <div class="container">
            <div class="ag_portfolio_inform">
              <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li class="active">Globuz</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

Answer 3

原因不适用

让我澄清一下您的代码无效的原因。您正在使用当前关联的.ag_portfolio_inform和.ag_portfolio_inform2。您需要从.ag_portfolio_inform中移除绝对值并使用.ag_portfolio_inform2上的值，反之亦然。

只需从.ag_portfolio_inform2中删除绝对定位，然后就可以使用.ag_portfolio_inform the所需的属性。

希望这会有所帮助。

Answer 4

IMO - 你不会以最聪明的方式解决这个问题。

有时你应该使用绝对定位，但我不认为这是其中之一。您正在尝试将图像元素用作背景图像。 This answer应该给你一些见解 - 特别是在你的情况下何时使用CSS的＃6。

虽然你正在做的是一种方法，但使用带有背景图像的常规div作为CSS属性更有意义。然后你可以像对待其他任何地方那样对齐里面的面包屑，而不必担心绝对的位置，这可能总是让你不知所措。

尝试这样的事情：

HTML

<div class="background-image">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li class="active">Globuz</li>
        </ol>
    </div>
</div>

CSS

.background-image {
    background-image: url("http://www.picshare.ru/uploads/161221/M8B1HBQEdS.jpg");
    background-size: cover;
    background-position: center;
}
.breadcrumb {
    border-radius: 0;
    background-color: transparent;
    padding: 15px 0 10% 0;

}
.breadcrumb li a {
    font-size: 15px;
    color: white;
}