使用引导程序后导航栏坏了答案

【问题标题】：Navigation bar is broken after using bootstrap使用引导程序后导航栏坏了
【发布时间】：2014-01-08 10:30:24
【问题描述】：

我正在建立一个网站。该站点并非完全由 bootstrap 构建。然后我想用bootstrap做一个简单的表格。添加引导程序后导航栏坏了，它失去了它的间距和高度和宽度等。

这里有几点需要注意 1. 我的导航栏总是在顶部 2. 我已经更改了我的 HTML 文件中的所有 id 和 class ，所以它不会与任何 bootstrap class 或 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;
}

【问题讨论】：

我们需要看一些代码...
我已经添加了代码，它现在工作正常，但是当我将它链接到引导程序时，导航栏坏了

标签： navigation twitter-bootstrap-3 navbar

【解决方案1】：

Bootstrap 使用全局重置

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

您的代码使用 box-sizing:content-box （这是默认设置，您无需设置）。因为你会弄乱多种样式，包括整个网格系统，通过从 Bootstrap 中删除它，改变你的非引导 css 上的数学。

示例

.myboxywox {
height:70px;
padding:10px 0;
}

总高度70px；

在你必须设置那个 height: 50px 之前，因为你有顶部和底部 10px 的填充，而 box-sizing:border-box 你没有。

【讨论】：

谢谢，这很有帮助