부트 스트랩을 사용하면 탐색 표시 줄이 깨집니다.

웹 사이트를 구축 중입니다. 사이트가 부트 스트랩으로 완전히 빌드되지 않았습니다. 그런 다음 부트 스트랩을 사용하여 간단한 양식을 만들고 싶습니다. 부트 스트랩을 추가 한 후에 네비게이션 바가 깨졌고 간격과 높이, 너비 등을 잃어 버렸습니다.부트 스트랩을 사용하면 탐색 표시 줄이 깨집니다.

1. 내 탐색 바는 항상 상단에 붙습니다. 2. 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>

에 대한

헤더 코드

#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

우리는 코드를 볼 필요가 있습니다 ... –

코드를 추가했는데, 지금은 잘 작동하지만, 내가 부트 스트랩에 링크하는 순간, 탐색 막대가 깨졌습니다. – Mitthun

부트 스트랩 당신의 코드가 상자 크기 조정을 사용

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

글로벌 리셋을 사용하는 CSS입니다 기본값 인 경우 설정하지 않아도됩니다. 부트 스트랩에서 이것을 제거하여 전체 그리드 시스템을 포함한 수많은 스타일을 엉망으로 만들 것이므로 비 부트 스트랩 CSS에서 수학을 변경하십시오.

예

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

70 픽셀의 총 높이

;

높이를 설정하려면 먼저 상단 및 하단에 10px 패딩이 있고 상자 크기 : 테두리 상자가 있어야하기 때문에 50px로 만들어야합니다.

출처

2014-01-08 14:52:38 Christina

고마워 이것이 매우 도움이됩니다. – Mitthun

부트 스트랩을 사용하면 탐색 표시 줄이 깨집니다.

답변

관련 문제