如何在 bootstrap 3 导航栏中放置图像而不是品牌文本？答案

【问题标题】：How do I put an image in the bootstrap 3 navbar instead of the brand text?如何在 bootstrap 3 导航栏中放置图像而不是品牌文本？
【发布时间】：2014-01-08 23:47:48
【问题描述】：

我正在使用 bootstrap3 构建我的第一个响应式 Web，一切都很好，只是我无法将导航放在我想要的位置。当屏幕调整大小时，它会移动并且移动屏幕更糟。我找不到在导航栏中使用图像而不是文本的任何说明..

【问题讨论】：

您不会在图像底部添加内容。图像是图像，您可以将图像放在导航栏中。 stackoverflow.com/a/20859774/1004312。了解有关 CSS、html 和响应式设计的更多信息：smashingmagazine.com/2009/05/29/…cssbasics.com htmldog.com/guides/css/beginner blog.teamtreehouse.com/beginners-guide-to-responsive-web-design splio.com/responsive html5rocks.com/en/mobile/responsivedesign getbootstrap.com - 阅读文档！
getbootstrap.com/getting-started/#examples 查看定位选项示例中的代码。查看上面的评论，了解如何在导航栏中放置图像。
我编辑了你的问题。您需要使用您的 css 和 html 以及任何 jQuery（如果适用）发布 jSFiddle、bootply、CodePen 或 JSBin。

标签： twitter-bootstrap drop-down-menu navigation responsive-design

【解决方案1】：

<img id="my-img" src="">
    <nav></nav>
</img>

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

您需要相对定位图像并将导航栏绝对定位在 img 内。

【讨论】：

【解决方案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>

【讨论】：