변경 내 네비게이션 바있다 :부트 스트랩 3 네비게이션 바는 다음

<body> 
    <div class="wrapper"> 
     <div class="container-fluid"> 
      <nav class="navbar navbar-inverse"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">My<b>App</b></a> 
       </div> 
       <div> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Learn</a></li> 
         <li><a href="#">Contact</a></li> 
         <li class="pull-right"><a href="#">Sign In | Register</a></li> 
        </ul> 
       </div> 
      </nav> 

     <!-- The rest omitted for brevity. -->

그리고 내 style.css :

* { 
    margin: 0; 
} 

html, body { 
    height: 100%; 
} 

.navbar-fixed-top { 
    min-height: 200px; 
} 

.navbar-nav > a { 
    color: rgb(255,0,0); 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 

.footer, .push { 
    height: 4em; 
} 

.footer { 
    background: rgb(0, 100, 255); 
}

그리고 해당 jsFiddle : 나는 몇 가지 일을하려고 http://jsfiddle.net/srhwgdsr/

여기 :

헤더를 더 크게 만들려고하는데, 규칙을 사용하여 style.css에서 헤더를 200px 분으로 설정하려고 시도 할 수 있습니다. 및
.navbar-nav > a 규칙을 사용하여 style.css에서 볼 수있는 것처럼 링크 색상 ("Learn", "Contact", "Sign In | Register")을 빨간색으로 설정하려고합니다. 및
나는이 "로그인 | 등록"핀 시도하고 당신이 왜이 전혀없는 pull-right

내 사용과 HTML에서 볼 수 있듯이)를 container-fluid 사업부의 오른쪽에있는 링크를 시도는 작동합니까? 부트 스트랩 3을 올바르게 구성하지 않았습니까? 어떻게 든 잠긴 것이 있습니까?

출처

2014-10-21 smeeb

특수성 문제입니다. 부트 스트랩의 CSS는 당신보다 더 구체적이므로 전례가 있습니다. 부트 스트랩에 정의 된 동일한 선택기를 사용하면 올바르게 작동합니다. 또한 JSFiddle을 잘못 사용하고 있습니다. 메타/헤드 태그가 없어야하며 외부 리소스가 사이드 바에 정의되어야하며 인라인이 정의되어서는 안됩니다.

예를 들어, 헤더의 링크를 목표로,이를 사용 APAD1 @

.navbar-inverse .navbar-nav>li>a { 
    color: rgb(255,0,0); 
}

Updated JSFiddle

출처

2014-10-21 15:18:17 APAD1

감사 (+1) - 즉에 관해서는, 제 2 문제를 어떤 아이디어를 내게하는 데 도움이 1 일과 3 일? 또한 제 2 호 (적색 링크)와 관련하여, 나는 "특이성 문제"가 의미하는 바를 따르지 않을 것입니다. 나는'.navbar-nav> a'를 가지고 있었다. 나에게 이것은 "이 규칙을"navbar-nav "요소의 하위 요소 인"a "요소에 적용합니다. 링크는 내 링크에 적용해야합니까? 그래서 당신이'.navbar-inverse .navbar-nav> li> a'로 이것을 수정할 때, 나는 아직도 나의 원래 규칙이 무시 된 것을 보지 못하고 있습니다. 당신은 정교 할 수 있습니까? 다시 한 번 감사드립니다! – smeeb

문제 없습니다. 근본적으로 당신은 당신의 선택자들로 충분히 구체적이지 않았습니다. Bootstrap이보다 구체적인'.navbar-inverse .navbar-nav> li> a '를 타겟팅하는 동안 메뉴의 링크를 타겟팅하려면'.navbar-nav> a'를 사용하고있었습니다. 이 경우 더 구체적인 선택기는 정의한 선택기와 같은보다 일반적인 선택기를 대체합니다. [여기에 특이성에 대한 자세한 내용을 읽어보십시오] (http://css-tricks.com/specifics-on-css-specificity/). 계속 ... – APAD1

첫 번째 문제는'.navbar-fixed-top'에 min-height를 적용하고 있지만 HTML에 클래스 이름을 가진 요소가 없다는 것입니다. 제 3 호에서는 Bootstrap'pull-right' 클래스를 사용하는 대신에 (여러분이 원하는 효과를 줄 것이라고 생각하지 않습니다.)'LI'와 그 다음 위치에 새로운 클래스를 할당 할 것입니다. 그건 절대적으로. [업데이트 된 JSFiddle] (http://jsfiddle.net/srhwgdsr/3/) – APAD1

부트 스트랩 3 네비게이션 바는 다음

답변

Updated JSFiddle

관련 문제