删除两个导航栏之间的底部边距 - bootstrap

Question

我的网络应用程序中有两个 navbars 。但是，这两个 navbars 之间有一个空格，如下图所示。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

我试过 .navbar {margin-bottom：0px} 但没有运气。

＆＃xA;＆＃xA;

这是我的HTML

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; link rel =“stylesheet”href =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”＆gt;＆＃xD;＆＃xA;＆lt; ;风格＆GT;＆＃的xD;＆＃XA; .navbar {margin-bottom：0px}＆＃xD;＆＃xA;＆lt; / style＆gt;＆＃xD;＆＃xA;＆lt;！ -  jQuery库 - ＆gt;＆＃xD;＆＃xA;＆lt; ; script src =“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD; ＆＃xA;＆lt;！ - 最新编译的JavaScript  - ＆gt;＆＃xD;＆＃xA;＆lt; script src =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap。 min.js“＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆lt; nav class =”navbar navbar-default“id =”navbar-no-margin“＆gt;＆＃xD;＆＃xA; ＆lt; div class =“container”＆gt;＆＃xD;＆＃xA; ＆lt; div class =“navbar-header”＆gt;＆＃xD;＆＃xA; ＆lt; a class =“navbar-brand”href =“＃”＆gt;品牌＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div class =“collapse navbar-collapse”＆gt;＆＃xD;＆＃xA; ＆lt; ul class =“nav navbar-nav navbar-right”＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”data-toggle =“modal”data-target =“＃signinmodal”＆gt;登录＆lt; / a＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”data-toggle =“modal”data-target =“＃signupmodal”＆gt;注册＆lt; / a＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆LT; / UL＆GT;＆＃的xD;＆＃XA; ＆lt; / div＆gt;＆lt;！ -  /.navbar-collapse  - ＆gt;＆＃xD;＆＃xA; ＆lt; / div＆gt;＆lt;！ -  /.container-->
 ＆LT; / NAV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; nav class =“navbar navbar-default”id =“navbar-no-margin”＆gt;＆＃xD;＆＃xA; ＆lt; div class =“container”＆gt;＆＃xD;＆＃xA; ＆lt; div class =“navbar-header”＆gt;＆＃xD;＆＃xA; ＆lt; a class =“navbar-brand”href =“＃”＆gt;品牌＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; div class =“collapse navbar-collapse”＆gt;＆＃xD;＆＃xA; ＆lt; ul class =“nav navbar-nav navbar-right”＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”data-toggle =“modal”data-target =“＃signinmodal”＆gt;登录＆lt; / a＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; a href =“＃”data-toggle =“modal”data-target =“＃signupmodal”＆gt;注册＆lt; / a＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆LT; / UL＆GT;＆＃的xD;＆＃XA; ＆lt; / div＆gt;＆lt;！ -  /.navbar-collapse  - ＆gt;＆＃xD;＆＃xA; ＆lt; / div＆gt;＆lt;！ -  /.container-->
 ＆LT; / NAV＆GT;  

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;

＆ #xA;

Answer 1

将body＆＃39; s padding-top设为50px。

＆＃13;

＆＃13;

body {
	padding-top: 50px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-default navbar-fixed-top" id="navbar-no-margin">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">Brand</a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#" data-toggle="modal" data-target="#signinmodal">Sign in</a></li>
				<li><a href="#" data-toggle="modal" data-target="#signupmodal">Sign up</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-->
</nav>
<nav class="navbar navbar-default" id="navbar-no-margin">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">Brand</a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#" data-toggle="modal" data-target="#signinmodal">Sign in</a></li>
				<li><a href="#" data-toggle="modal" data-target="#signupmodal">Sign up</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-->
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将position属性设置为relative而不是fixed，并将margin bottom设置为0。

.navbar-default {
    position: relative;
    margin-bottom: 0;
}

下面是一个显示输出的Jsfiddle。 https://jsfiddle.net/niteshp27/vkntcdbf/

Answer 3

important

将margin-bottom添加到规则末尾会覆盖bootstrap中if的默认样式。