我正在使用 HTML 和 CSS 构建示例网页。我也在使用 Bootstrap 。我注意到在链接 Bootstrap CSS 之前和链接 Bootstrap CSS 之后页面的输出有所不同。
下面是我的代码和输出:
在添加 Bootstrap 之前
添加 Bootstrap 之后
添加Bootstrap之前，菜单栏好像是从边缘出来的，但是添加Bootstrap之后，菜单栏明显贴在边缘了。为什么会这样？ Bootstrap 中的什么属性使这种变化发生？
下面是我的代码:
index.html :
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Server App</title>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='top-bar' class="menu">
<div id="logo">
<img src="images/logo.png" width="220px" />
</div>
<ul>
<li class="pill active">Home</li>
<li class="pill">About Us</li>
<li class="pill">Photos</li>
</ul>
</div>
<div id = "content">
</div>
</body>
</html>
样式.css:
body{
background-color:#C6C4C4;
}
#top-bar{
position:relative;
background-color:#6A5293;
padding:0px 0px 0px 0px;
height:50px;
margin:0px 0px 0px 0px;
width:100%;
display:block;
}
.menu ul{
list-style-type:none;
margin:0;
padding:0;
float:right;
}
.menu li{
float:left;
}
.pill{
display:flex !important;
width: 120px;
height:50px;
font-weight: bold;
color: #FFFFFF;
background-color:#6A5290;
justify-content:center;
align-items:center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
.pill:hover{
background-color:#5d3f91;
}
.active{
background-color:#5d3f91;
}
#logo{
float:left;
}
#content{
height:800px;
width:70%;
margin-right:auto;
margin-left:auto;
background-color:#fff!important;
margin-top:10px;
margin-bottom:10px;
}
最佳答案
Bootstrap 中有一个 CSS 重置，可以将边距设置为 0。
关于html - div HTML CSS 周围的额外空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33718943/