Flexbox 和 Bootstrap 如何在 Navbar 品牌区域放置图片

Question

我有一个项目，我使用了引导导航栏，但将其分解为弹性框，以便按照规范对齐各个部分。我想在导航栏的最左角放置一个徽标，通常会在该位置给出 navbar-brand ，但我没有运气获得要显示的图像。我能做的最好的就是获得一个图像占位符图标来显示。附件是现在导航栏的图像。 以下是导航栏的 HTML：

    <div class="container first-container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container navcell flex-navbar">
            <div class="navbar-brand">
            <!--<a class="navbar-brand" href="#">-->
                <img src="images/SST.jpg" class=" navbar-brand sst-image"></img>
            <!--</a>-->
            </div>
            <button class="navitem navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navitem navbar-collapse collapse navbar-responsive-collapse">
                <ul class="nav navcell navbar-nav">
                    <li class="active"><a href="#"><span class="navitem glyphicon glyphicon-home"></span> Home</a></li>
                    <li><a href="#"><span class="navitem glyphicon glyphicon-edit"></span> Services & Rates</a></li>
                    <li><a href="#"><span class="navitem glyphicon glyphicon-book"></span> Portfolio</a></li>
                    <li><a href="contactForm.html"><span class="navitem glyphicon glyphicon-user"></span> About/Contact John</a></li>
                    <li><a href="#"><span class="navitem glyphicon glyphicon-log-in"></span> Log In</a></li>
                </ul>
                <form class="navcell navbar-form">
                    <input type="text" class="form-control" placeholder="Search" id="searchinput">
                        <button type="navbtm submit" class="btn btn-default">
                            <span class="navitem glyphicon glyphicon-search"></span>
                        </button>
                    </input>
                </form>
            </div><!-- Nav-collapse -->
        </div><!-- Container -->
    </nav>
</div><!--Container-->

相关的.css是

body {
margin-top:50px;
background: url('../images/marble.jpg') no-repeat center top scroll;
}
.container{
width: 100%;
}
.navbar-brand {
background-image: url('../images/SST.jpg') no-repeat;
position: relative;
}
.banner {
font-family: 'atlas_of_the_magiregular', cursive;
font-size: 1.7em;
line-height: 1.3em;
padding: 10px 8px;
margin: 10px 0px;
background-image: url('../images/Sic Semper Scroll.png') no-repeat;
background-position: 50% 50%;
position: relative;
}

我在 .css 中包含了横幅部分，以展示我是如何实现导航栏下方的滚动图像的。我尝试将品牌徽标设置为 HTML 中的图像、CSS 中的背景图像，什么都没有。我可以将文本放入导航栏品牌并设置它的颜色，但我的徽标图像没有运气。接下来我可以尝试什么？

Answer 1

问题似乎与您用于图像的相对路径有关。

如果您使用带有绝对 URL 的图像，它可以正常工作。试试这个看看我的意思：

<div class="navbar-brand">
    <!--<a class="navbar-brand" href="#">-->
    <img src="http://i.imgur.com/60PVLis.png" alt="" class="navbar-brand sst-image">
    <!--</a>-->
</div>

如果您想使用相对路径，您需要确保它指向包含图像的文件夹。在您的 CSS 中，路径是 ../images/SST.jpg，但在您的 HTML 中，路径是 images/SST.jpg。你需要找到正确的道路。

附带说明，请记住<img> 是void element。不需要结束标签。您可以删除</img>。