使用引导程序后导航栏损坏

Question

I am building a website . 我正在建立一个网站。 The site is not completely build by bootstrap . 该站点不是由bootstrap完全构建的。 Then I want to use bootstrap to make a simple form . 然后，我想使用引导程序制作一个简单的表格。 After adding bootstrap the navigation bar is broken , it lost it's spacing and height and width and so on . 添加引导程序后，导航栏被破坏，丢失了它的间距，高度和宽度等。

Here are some point to be noted 1. My nav bar is always stick on the top 2. I have changed all the id and class in my HTML file so , it doesn't conflict with any bootstrap class or id . 这里有一些要注意的地方1.我的导航栏始终停留在顶部2.我更改了HTML文件中的所有id和class，因此，它与任何bootstrap class或id不冲突。

Header Code for HTML 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>

Here is the CSS 这是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;
}

Answer 1

Bootstrap uses a global reset Bootstrap使用全局重置

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

Your code is using box-sizing:content-box (which is the default, you don't need to set it). 您的代码使用box-sizing：content-box（这是默认设置，您无需设置它）。 Since you'll mess up a multitude of styles, including the entire grid system, by removing this from Bootstrap, change your math on your non-bootstrap css. 由于您会从Bootstrap中删除多种样式，包括整个网格系统，因此请在非Bootstrap CSS上更改数学。

Example 例

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

Total height of 70px; 总高度为70px；

before you'd have to make that height: 50px because you had top and bottom 10px padding, with box-sizing: border-box you do not. 在您必须将该高度设置为：50px之前，因为您的顶部和底部的填充均为10px，而box-sizing：border-box则没有。

使用引导程序后导航栏损坏

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-08 14:52:38

使用引导程序后导航栏损坏

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-08 14:52:38

解决方案1
1 已采纳 2014-01-08 14:52:38