html - 如何在两个导航栏之间没有任何空间的情况下创建两个导航栏

Question

我想设计一个带有“bootstarp”(无响应)的网页，例如第一个图像链接。但我设计了第二个图像链接。我需要将 Logo 放在两个 'navbar' 的顶部，并且我不需要像第二个图像那样在两个 'navbar' 之间有任何空间。抱歉英语不好。请帮助我。

first Image

second Image

    <div class="navbar navbar-default navbar-fixed-top  navBack" role="navigation">
    <div class="container ">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class=""><a href="#">login</a></li>
                <li><a href="#about">logout</a></li>
                <li><a href="#contact">about</a></li>
                <li><a href="#contact">buy<img src="img/00.png"
                    class="pull-left" style="width: 30px" /></a></li>
            </ul>
        </div>
    </div>
</div>
<nav class="navbar navbar-default background-color clear " role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
        </div>
        <div class="collapse navbar-collapse clear " id="bs-example-navbar-collapse-1">
            <img class="pull-right" src="img/buy100-30.jpg" />
            <ul class="nav navbar-nav">
                <li class=""><a href="#">some text</a></li>
                <li><a href="#">some text</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group" style="position: absolute">
                    <button type="submit" class="btn  btn-warning border-radius">search</button>
                </div>
                <div>
                    <input type="text" class="form-control text-right border-radius"
                        placeholder="search " style="width: 350px" />
                </div>
            </form>
        </div>
    </div>
</nav>

 <style>
    .direction {
        direction: rtl;
    }

    .navBack {
        background-image: url("img/stripe.png");
        background-repeat: repeat-x repeat-y;
    }

    .background-color {
        background-color: #4d4246;
    }

    .border-radius {
        border-radius: 0;
    }


    .clear {
        clear: both;
    }
</style>

我只写了这些 css，另一个 css 来自 bootstrap3

Answer 1

Bootstrap 导航栏有一个 20px 的底部边距，这是你的空白的来源。

将此添加到您的 CSS 以删除所有导航栏的边距:

.navbar {
    margin-bottom: 0;
}

最好向您的第一个导航栏添加一个类，并且只删除它的边距以避免在其他地方出现意外结果。

DEMO