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>

如何将图像放入bootstrap 3导航栏而不是品牌文本？

2 个答案: