我正在建立一个网站。该网站并非完全由引导程序构建。然后我想使用引导程序制作一个简单的表单。添加引导后导航栏坏了，失去了它的间距和高度和宽度等等。
这里有一些需要注意的要点 1.我的导航栏总是粘在顶部 2.我已经更改了HTML文件中的所有id和类，因此它不会与任何引导类或id冲突。
HTML 的标头代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1">
<title>Iron Bull Responsive Restaurant Template</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="css/layout.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<a id="Top"></a>
<div id="nav-original">
<div id="navitems-original">
<div id="logo"><a href="#Top"><img src="images/logo.png"></a></div>
<ul>
<li><a href="#Menu">WE OFFER</a></li>
<li><a href="#Specials">SPECIALTIES</a></li>
<li><a href="#Locations">Availability</a></li>
<li><a href="#Story">Story</a></li>
<li><a href="#Careers">Recipes</a></li>
<li><a href="#Events">Happenings</a></li>
</ul>
</div>
</div>
这是 CSS
#nav-original {
background:url("../images/header.png") 50% 0 no-repeat;
background-color:#1C1414;
width:100%;
z-index:110;
position:fixed;
text-align:center;
box-shadow:0 0 5px #2a2a2a;
}
input {
-webkit-appearance: none;
}
#navitems-original {
width:1024px;
height:50px;
margin:0 auto;
padding:20px 0px;
transition: margin 0.15s ease-in 0s;
position:relative;
}
#navitems-original ul {
padding-top:12px;
margin-left:280px;
}
#nav-original ul li {
margin-right:0px;
font-size:16px;
display:inline;
text-transform:uppercase;
position:relative;
}
#nav-original a {
text-decoration:none;
outline:none;
}
#nav-original div#logo {
position:absolute;
top:0;
border:none;
}
#nav-original ul li a {
color:#B2B0B0;
text-decoration:none;
padding:18px 18px 6px 18px;
outline:none;
font-weight:normal;
transition: color 0.2s ease-in 0s
}
#nav-original ul li a:hover, #nav ul li a.active {
color:#C03118;
}
引导程序使用全局重置
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
您的代码正在使用 box-ssize：content-box（这是默认值，您不需要设置它）。由于你会弄乱多种样式，包括整个网格系统，通过从 Bootstrap 中删除它，在非引导 css 上更改你的数学。
例
.myboxywox {
height:70px;
padding:10px 0;
}
总高度为70px;
在你必须达到这个高度之前：50px，因为你有顶部和底部10px的填充，带有框大小：边框框，你没有。
我今天遇到了这个问题。将引导链接添加到我的.html后，我的导航栏对齐方式被破坏了。所以我注意到 bootstrap 会自动将 ul 边距块端设置为 16px，边距块端设置为 16px，填充内联开始设置为 32px，左边距设置为 32px。你自己的 CSS 将无法覆盖这些值，除非你使用"！important"方法。
因此，请尝试重置您的ul边距和填充，如下所示：
ul {
margin: 0 !important;
padding: 0 !important;
}