Navigation 使用引导后导航栏已损坏_Navigation_Twitter Bootstrap 3_Navbar

Navigation 使用引导后导航栏已损坏

navigation twitter-bootstrap-3

Navigation 使用引导后导航栏已损坏,navigation,twitter-bootstrap-3,navbar,Navigation,Twitter Bootstrap 3,Navbar,我正在建立一个网站。该站点不是完全通过引导构建的。然后我想用bootstrap制作一个简单的表单。添加引导后，导航栏被破坏，失去了它的间距、高度和宽度等这里有几点需要注意 1.我的导航条总是贴在顶部 2.我已经更改了HTML文件中的所有id和类，因此它不会与任何引导类或id冲突 HTML的头代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

我正在建立一个网站。该站点不是完全通过引导构建的。然后我想用bootstrap制作一个简单的表单。添加引导后，导航栏被破坏，失去了它的间距、高度和宽度等

这里有几点需要注意 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>

引导使用全局重置

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

您的代码使用的是框大小：内容框（这是默认值，您不需要设置它）。由于将其从引导中删除会使许多样式（包括整个网格系统）变得混乱，因此请更改非引导css的计算方法

示例

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

总高度为70px

在此之前，您必须使该高度：50px，因为您有顶部和底部10px的填充，框大小：边框框，您没有。

我们需要查看一些代码…我添加了代码，现在可以正常工作，但当我将其链接到引导时，导航栏断开了。这非常有用

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