Question

我想设计一个包含＆＃39; bootstarp＆＃39;的网页。（没有响应），像第一个图像链接。但我设计了第二个图像链接。我需要把Logo放在两个＆＃39; navbar＆＃39; ，我不需要在两个导航栏之间留出任何空间。喜欢第二张图片。抱歉英语不好。请帮帮我。

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

Answer 2

添加

.navbar {
    margin: 0;// if you dont need any margins
}


.navbar {
    margin: 0 auto;//add this to append parent tag
}

如何创建两个导航栏'两个导航栏之间没有任何空格

2 个答案: