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。