Question

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

以下是需要注意的一点我的导航栏总是贴在上面 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;
}

Answer 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;

在你必须达到这个高度之前：50px，因为你有顶部和底部的10px填充，使用box-sizing：border-box你没有。

使用bootstrap后导航栏中断

1 个答案: