大屏幕左侧的 Bootstrap 导航栏品牌形象

Question

我正在创建一个网站作为我练习的一部分。我应该在 jumbotron 内放置一个导航栏，而且我已经做到了。问题是，当我放一张图片时，它不在 jumbotron 的最左边。相反，它位于导航栏的最左侧。现在我尝试将图像向左移动 -55 像素，使其位于 jumbotron 的最左侧并且它可以工作。但是，如果我在较小的屏幕上尝试它，图像会突然越过屏幕的最左侧。你有什么方法可以确保我的图像仍然在 jumbotron 的最左侧，同时仍然保持它的响应能力？这是我的代码：

div.navbar-header > a > img {
  padding: 0px;
  margin: 0px auto;
  position: absolute;
  left: -55px;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <div class="jumbotron">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="http://demo.drupalizing.com/bluemasters/site/sites/all/themes/bluemasters/logo.png" class="img-responsive" width=274 height=56></a>
                    </div>
                    <div class="navbar-right navbar-collapse collapse" id="navbar">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#"><h4>Home</h4></a></li>
                            <li><a href="#"><h4>About</h4></a></li>
                            <li><a href="#"><h4>Portfolio</h4></a></li>
                            <li><a href="#"><h4>Blog</h4></a></li>
                            <li><a href="#"><h4>Contact</h4></a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

提前谢谢你。

Answer 1

我认为这就是我所能提供的答案。我已将图像的 HTML 位置从导航栏移动到容器，紧随其后。

/*
Scales the size of the image so it isn't too large
Pushes it from the top a little bit
Changes the z-index so that image appears on top of the navbar rather than behind it
*/

.container img {
  margin-top: 40px;
  position: relative;
  z-index: 1;
  width: 80%;
}
/*
Moves the jumbotron behind the image now
*/

.jumbotron {
  position: relative;
  z-index: -1;
}
/*
When the screen gets smaller, the navbar shrinks, so this media query accommodates that and doesn't push the image down as much
*/

@media screen and (max-width: 768px) {
  .container img {
    margin-top: 20px;
  }
}
/*
The navbar changes size again when smaller so this positions the image a bit nicer
*/

@media screen and (max-width: 408px) {
  .container img {
    margin-top: 30px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="navbar-brand" href="#">
    <img src="http://demo.drupalizing.com/bluemasters/site/sites/all/themes/bluemasters/logo.png" class="img-responsive" width=274 height=56>
  </a>
  <div class="jumbotron">
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-right navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><h4>Home</h4></a>
          </li>
          <li><a href="#"><h4>About</h4></a>
          </li>
          <li><a href="#"><h4>Portfolio</h4></a>
          </li>
          <li><a href="#"><h4>Blog</h4></a>
          </li>
          <li><a href="#"><h4>Contact</h4></a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

如果您对此有任何疑问，请尽管提问。如果您发现这有什么问题，请告诉我！如果您可以扩展此内容，请随意：D。