我在导航栏和部分之间有一个空格。谁能看到错误？

时间：2015-03-27 20:25:19

标签： html css twitter-bootstrap

我在navbar和section1之间有一个中断/边距。我使用bootstrap，看到任何一件事都没有错。是否需要添加一个额外的类才能删除此空间？有没有人知道什么是错的？谢谢！

＆＃13;
＆＃13; 
h1 {

	font-family: 'Raleway', sans-serif;

}

body {

	background-color: black;

}

section.section1 {

	height: 100%;
	background-image: url("images/background3.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	background-size: cover;

}



.title-div {

	position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;

}

.title {

	text-align: center;
	color: white;
	font-size: 7vw;
	font-family: 'Raleway', sans-serif;
}

.typed-cursor{

    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    color: white;
	font-size: 7vw;
	font-family: 'Raleway', sans-serif;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
＆＃13; 
<html>

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script src="js/typed.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>

	<head>

		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href='http://fonts.googleapis.com/css?family=Lato|Raleway' rel='stylesheet' type='text/css'>

		

	</head>

	<body>

	<div class = "navbar navbar-inverse navbar-static-top">
	        <div class = "container">
	        	<div class="navbar-header">
	           
	                <a href = "#" class = "navbar-brand">Cotton Fencing</a>
	               
	                <button class = "navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
	           
	        		</button>
	        	</div>
	       
		        <div class="collapse navbar-collapse navHeaderCollapse">
		            <ul class="nav navbar-nav navbar-right">
		           
		                <li><a href = "#">Home</a></li>
		                
		                	               
		            </ul>
		        </div>
	        </div>
	       
	</div>

		<section class="section1" id="section1">
			<div class="title-div">
				
				<script>
				  $(function(){
				      $(".element").typed({
				        strings: ["Beautiful. ^700", "Easy. ^700", "Cheap. ^700", "Cotton Fencing."],
				        typeSpeed: 0
				      });


				  });


				</script>
				

				<span class="element title"></span>
				<span id="typed-cursor"></span>
				

			</div>
		</section>

	</body>

	

</html>
＆＃13;
＆＃13;
＆＃13;

更新以下是它的外观图片。仅供参考，背景设置为黑色。

What it looks like

更新2 非常感谢大家的帮助！感谢Mike Barwick发现错误。我想我们都在考虑这个问题，答案显而易见。再次感谢您的帮助！

5 个答案:

答案 0 :(得分：1)

这将工作（我认为大声笑）......基于你的形象。

.navbar {
    margin-bottom: 0;
}

答案 1 :(得分：0)

烨。这是ul的保证金。添加像ul.nav.navbar-right { margin: 0; }这样的CSS规则并观看它消失。

编辑仅用于证明：

＆＃13;
＆＃13; 
/* Add this line */
ul.nav.navbar-right {
    margin: 0;
}

h1 {

	font-family: 'Raleway', sans-serif;

}

body {

	background-color: black;

}

section.section1 {

	height: 100%;
	background-image: url("images/background3.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	background-size: cover;

}



.title-div {

	position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;

}

.title {

	text-align: center;
	color: white;
	font-size: 7vw;
	font-family: 'Raleway', sans-serif;
}

.typed-cursor{

    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    color: white;
	font-size: 7vw;
	font-family: 'Raleway', sans-serif;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
＆＃13; 
<html>

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script src="js/typed.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>

	<head>

		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href='http://fonts.googleapis.com/css?family=Lato|Raleway' rel='stylesheet' type='text/css'>

		

	</head>

	<body>

	<div class = "navbar navbar-inverse navbar-static-top">
	        <div class = "container">
	        	<div class="navbar-header">
	           
	                <a href = "#" class = "navbar-brand">Cotton Fencing</a>
	               
	                <button class = "navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
		            	<span class="icon-bar"></span>
	           
	        		</button>
	        	</div>
	       
		        <div class="collapse navbar-collapse navHeaderCollapse">
		            <ul class="nav navbar-nav navbar-right">
		           
		                <li><a href = "#">Home</a></li>
		                
		                	               
		            </ul>
		        </div>
	        </div>
	       
	</div>

		<section class="section1" id="section1">
			<div class="title-div">
				
				<script>
				  $(function(){
				      $(".element").typed({
				        strings: ["Beautiful. ^700", "Easy. ^700", "Cheap. ^700", "Cotton Fencing."],
				        typeSpeed: 0
				      });


				  });


				</script>
				

				<span class="element title"></span>
				<span id="typed-cursor"></span>
				

			</div>
		</section>

	</body>

	

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试：

.nav.navbar-right ul { 
   margin: 0; 
}

答案 3 :(得分：0)

或＆＃34; margin-top：0;＆＃34; 保证金可以定义为＆＃34;保证金：0 0 0 0; 第一个数字是顶部，第二个是右边，第三个是：底部，第四个：左边

迎接

答案 4 :(得分：0)

只需要将ul的边距更改为0 

.nav .navbar-right ul {
  margin: 0;
}

应该修复它！ ：）

相关问题
最新问题