Question

我正在创建一个网站，作为我练习的一部分。我应该在一个超大屏幕内放一个导航栏，我已经完成了。问题是，当我放置一个图像时，它不在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位置从导航栏移到了容器之后，直接在它之后。

＆＃13;

/*
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;
  }
}

＆＃13;

<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>

＆＃13;

如果您对此有任何疑问，请询问。如果您发现有任何问题，请告诉我！如果你可以展开这个，请随意：D。

jumbotron左侧的Bootstrap导航栏品牌形象

1 个答案: