Question

我有一个项目，我使用了一个bootstrap导航栏，但将其分解为flexboxes，以便按照规范对齐各个部分。我想在导航栏的最左侧放置一个徽标，通常会给出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

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

如果您使用带有绝对网址的图片，则可以正常使用。试试看我的意思：

<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>。

Flexbox和Bootstrap如何将图像放入Navbar品牌区域

1 个答案: