使用引導程序後導航欄損壞

我正在構建一個網站。該網站不是完全由bootstrap構建。然後我想用bootstrap來製作一個簡單的表單。添加引導程序後，導航欄被破壞，失去了它的間距，高度和寬度等等。使用引導程序後導航欄損壞

這裏有一些問題需要注意 1.我的導航欄總是粘在上面 2.我已經改變了所有的ID和類在我的HTML文件，所以，它不與任何引導類衝突或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; 
}

來源

2014-01-08 Mitthun

我們需要看到一些代碼... –

我已經添加了代碼，它現在可以正常工作，但是現在我將它鏈接到bootstrap，導航欄已損壞 – Mitthun

引導使用全局復位

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

你的代碼是使用箱大小：內容箱（這是默認的，你不需要設置它）。既然你會弄亂包括整個網格系統在內的多種樣式，通過從Bootstrap中刪除這些樣式，改變你的非引導CSS的數學。

例

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

的70像素，總高度;

之前，你必須做出這樣的高度：50px，因爲你有頂部和底部10px填充，與框大小：邊框，你沒有。

來源

2014-01-08 14:52:38 Christina

感謝這對我們非常有幫助 – Mitthun

使用引導程序後導航欄損壞

回答

相關問題