jumbotron左侧的Bootstrap navbar品牌形象

Question

我正在创建一个网站作为我的练习的一部分。我应该把一个导航栏放在一个超大号里面，而且我已经做到了。问题是，当我放置一张图像时，它不在大电池的最左侧。而是位于导航栏的最左侧。现在我试着将图像-55像素向左移动，以便它位于大臂最左侧的部分，并且可以工作。但是，如果我在较小的屏幕上尝试它，图像突然越过屏幕的最左侧部分。你有没有什么方法可以确保我的形象仍然在大臂最左侧，同时仍然保持其响应？这里是我的代码：

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。