html - 使用 Bootstrap 将 Logo 放在顶部标题

Question

如何设置这样的 Logo ？ (第二个)

我已经尝试过但没有用。我的代码

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

演示:https://jsbin.com/holumi/1/

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

---

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

在 navbar 上添加 navbar-custom。

删除 brand 和 navbar-brand 并添加 logo

根据需要调整其他 CSS。最小宽度媒体查询之前的 CSS 适用于所有视口(viewport)尺寸，最小宽度媒体查询内部的内容适用于该最小宽度及以上。

position:absolute 的使用将最小宽度处的 Logo 置于文档流之外，因此填充用于将导航栏导航放置到位。注意这些值。

此示例中的小视口(viewport) CSS 对大和小使用相同的 Logo ，如果 Logo 变暗，您可以使用响应式实用程序类隐藏一个并在最小宽度或最大宽度处显示另一个，例如 Logo 上的 visible-xs 将在深色背景上显示，而 Logo 上的 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>