如何将图像放在引导程序 3 导航栏中而不是品牌文本中

Question

我正在使用bootstrap3构建我的第一个响应式网络，一切都很好，除了我不能将导航放在我想要的地方。当屏幕调整大小时，它会移动，移动屏幕会更糟。我找不到在导航栏中使用图像而不是文本的任何说明。

Answer 1

<img id="my-img" src="">
    <nav></nav>
</img>
<style>
    #my-img{
        position: relative;
    }
    #my-img nav{
        position:absolute;
        bottom:0;
    }
</style>

您需要相对定位图像，并将导航栏绝对定位在 IMG 中。

Answer 2

在导航栏标题中，使用类 .navbar-brand 的链接，并将图像插入其中。 此外，将图像声明为响应式，如下例所示。

<nav class="navbar navbar-default" style="border:0px;margin:0px;">
    <div class="container-fluid" style="background-color:#175FAF;">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img src="img/logo.jpg" alt="logo" class="img-responsive"></a>
        </div>

    </div>
</nav>