Bootstrap - 在顶部标题处放置徽标

Question

我如何设置这样的徽标？ （第二个）

我已经尝试但没有工作。我的代码

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="brand navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#/property/list/1">Buy</a>
                    </li>
                    <li>
                        <a href="#/property/list/2">Rent</a>
                    </li>
                    <li>
                        <a href="#/property/list/3">New Properties</a>
                    </li>
                    <li>
                        <a href="#/property/alert">Property Alert</a>
                    </li>
                    <li>
                        <a href="#/resource">E-Learning</a>
                    </li>
                    <li>
                        <a href="#/about">About Us</a>
                    </li>
                    <li>
                        <a href="#/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

请建议和圣诞快乐：）

Answer 1

DEMO：https://jsbin.com/holumi/1/

https://jsbin.com/holumi/1/edit?html,css,output

---

徽标的大小很重要，请调整MIN-WIDTH媒体查询以将徽标移动到位。

在navbar-custom上添加navbar。

删除brand和navbar-brand并添加logo

根据需要调整其他CSS。 CSS最小宽度媒体查询之前的CSS适用于所有视口大小，最小宽度媒体查询中的内容是针对该最小宽度和向上的。

使用position:absolute将徽标以最小宽度放置在文档流之外，因此使用填充将navbar-nav置于适当位置。注意值。

此示例中的小视口CSS对大小都使用相同的徽标，如果徽标变暗，您可以使用响应实用程序类隐藏一个并以最小宽度或最大宽度显示另一个，例如在深色背景上的徽标上的visible-xs和用于所有其他尺寸的徽标上的hidden-xs。

<强> CSS

.navbar-custom {
    background: navy
}

.navbar-custom .logo img {
    padding: 15px;
    max-width: 100%;
    height: auto;
}

.navbar-custom .logo {
    float: left;
    padding-right: 40px;
    width: 100%;
}

.navbar-custom .navbar-toggle {
    position: absolute;
    right: 15px;
    top: 15px;
    border: 0px;
    width: 50px;
    margin: 0;
}

.navbar-custom .icon-bar {
    width: 100%;
    margin: 5px 0;
    height: 3px;
}

@media (min-width:768px) { 
    .navbar-custom.navbar {
        height: 200px
    }

    .navbar-custom .container {
        position: relative;
        overflow: visible;
    }

    .navbar-custom .navbar-nav {
        padding: 125px 0 0;
        text-align: center;
        width: 100%;
    }

    .navbar-custom .navbar-nav > li {
        display: inline-block;
        float: none;
    }

    .navbar-custom .logo {
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        z-index: 5000;
        display: block;
        float: none;
        padding: 0;
    }

    .navbar-custom .logo:before,
    .navbar-custom .logo:after {
        position: absolute;
        background: #fff;
        content: '';
        left: -2000px;
        width: 2000px;
        bottom: 0;
        display: block;
        height: 100%;
    }

    .navbar-custom .logo:after {
        left: auto;
        right: -2000px;
    }
}

<强> HTML

<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="logo" href="#"><img src="http://placehold.it/100x75/000/FFFFFF&text=LOGO" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#/property/list/1">Buy</a>
                    </li>
                    <li>
                        <a href="#/property/list/2">Rent</a>
                    </li>
                    <li>
                        <a href="#/property/list/3">New Properties</a>
                    </li>
                    <li>
                        <a href="#/property/alert">Property Alert</a>
                    </li>
                    <li>
                        <a href="#/resource">E-Learning</a>
                    </li>
                    <li>
                        <a href="#/about">About Us</a>
                    </li>
                    <li>
                        <a href="#/contact">Contact Us</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>  

Answer 2

您可以完全从导航栏中删除该品牌，然后在该导航栏上方添加一个div，其中包含一个img属性作为您的徽标

Answer 3

创建两个导航栏并将第二个导航栏的顶部位置设置为从第一个导航栏开始。

<nav class="navbar navbar-inverse navbar-fixed-top my-logo" role="navigation">
   .....
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top my-menu" role="navigation">    

现在为第二个导航栏创建样式

.my-menu {
     top: 50px;
}