Question

我有一个令人讨厌的小问题我无法解决。我需要将一个高大的图像添加到bootstrap导航栏（navbar-fixed-top，如果可能的话）。图像是导航栏品牌。让我们说图像高350像素，导航条60px。这会导致导航栏的背景将空间填充到图像的底部。

我需要将该图像伸出导航栏并让其下方的文字在其周围流动。如果我使用图像的绝对位置，它将是我想要的位置，但它将位于文本之上。那不好。我需要文本浮动它。

我该如何解决这个问题？

Answer 1

不确定这是否是您正在寻找的，或者您为什么要这样做，但这是我的看法：

我将图片放在页面正文中，除非有充分的理由将其留在标题中？这允许您更有效地设置周围文本的属性。

一个注意事项 - 您使用的图像是完整的光栅图像，因此，文本不会环绕其外部，例如打印布局将在杂志或报纸的内嵌图像中。因此，如果这是您正在寻找的内容，那么您需要从不同的图片素材开始。我选择解决这个问题，就好像你只想让文本环绕图像矩形一样。

另外，我放弃了你的CSS，并在机构中注释了两个我在本地没有的js文件，这样可能会影响结果。

最后的注意事项 - 因为这个图片与标题重叠，我建议做一些类似＆＃34; pull-right＆＃34;在导航栏上，它不会被徽标图像重叠。

以下HTML应该是您查看结果所需的全部内容 - 我只是从CDN中抓取jQuery和Bootstrap，也应该适合您。如果您对此有任何疑问，请与我联系。

<!DOCTYPE HTML>
<html>
<head>
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
    .navbar-brand {
        position: relative;
        top: -130px;
        left: -60px;
        margin: 0 0 25px 0;
        padding: 0;
        height: auto;
    }
    </style>
</head>
<body>
  <div class="container">

    <!-- Static navbar -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="row">
            <div class="col-xs-9 pull-right">
                <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="https://www.bitballoon.com//images/posts/grunt-logo.png"></a> -->
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
                    <li><a href="../navbar-static-top/">Static top</a></li>
                    <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                  </ul>
                </div>
                <!--/.nav-collapse -->
            </div><!-- col-xs-8 -->
        </div><!-- row -->
      </div>
      <!--/.container-fluid -->
    </nav>

    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
      <a class="navbar-brand" href="#"><img src="https://www.bitballoon.com//images/posts/grunt-logo.png"></a>
      <h1>Navbar example</h1>
      <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
      <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
      </p>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
      window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')

    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- not sure what this is... removing ..................
    <script src="js/docs.min.js"></script> -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug 
    ..... don't have this script, removing .................
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    -->
</body>

</html>

将高图像添加到引导程序导航栏

1 个答案: