使用Bootstrap 3的两行导航栏

Question

我正在尝试为具有两行和margin-top的网站创建导航栏：0代表第一行。这段代码有效，但无法使上一行的零边距对齐。

---------------------------------------------------------------------
           icon-image(small icon) slogan(text)

           Site Logo  company name 
----------------------------------------------------------------------

代码。

  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <nav class="navbar-inverse nav-upper">
                <div class="container-fluid">
                    <ul class="nav navbar-upper">
                        <li>
                            <a class="navbar-brand" href="#">
                                <span><img src="~/lib/images/icn.png" /></span>
                                 website slogan
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <span><img src="~/lib/images/_image1.png" /></span>
                    Company Name
                </a>
            </div>
        </div>
    </div>

CSS

.nav-upper ul.navbar-upper li {
  margin-top: 0;
}

Answer 1

您想要的东西吗？

引导：https://www.bootply.com/N7NZzIDoVm

Css ：

.nav-upper ul.navbar-upper li {
  margin-top: 0;
}

.nav-upper > div {padding:0;}