CSS는 부트 스트랩으로 스타일을 지정합니다.

Question

부트 스트랩 - 사스 환경에서 정적 톱 바를 만들려고합니다. 문제점 : 상단 막대를 응답 성을 유지하면서 고정시킵니다. 상속 및 중첩 규칙에 대한 CSS 문서를 읽었지 만 여전히이 사례에 적용하는 방법은 확실하지 않습니다.

지금은 상단 막대가 고정되어 있지만 응답이 없습니다.

CSS

.fixed_pos { 
    position: fixed; 
} 

.flowing_body { 
    margin-top: 100px; 
} 

부트 스트랩 CSS

// Reset utility classes due to specificity 
[class*="span"].hide, 
.row-fluid [class*="span"].hide { 
    display: none; 
} 

[class*="span"].pull-right, 
.row-fluid [class*="span"].pull-right { 
    float: right; 
} 

HTML

<div class="container-fluid"> 
    <div class="fixed_pos row-fluid"> 
     <div class="span9">//left long side of top bar</div> 
     <div class="span3">//right long side of top bar</div> 
    </div> 
    <div class="row fluid flowing_body"> 
     <%= yield %> 
    </div> 
</div> 

이 내가 일을 추가하려고 것입니다 전자 응답 기능 : CSS

.row-fluid .fixed_pos { 
    position: fixed; 
} 

HTML

<div class="row-fluid"><!-- MENUS --> 
    <div class="fixed_pos"> 
    //everything else the same 
    </div> 
</div> 

그러나 다음 상단 바의 크기가 축소되고 여전히 반응하지.

감사합니다. 이 여기에 아주 좋은 참고가 있고 난 나 자신에 의해 그것을 해결하기 위해 시도했지만 아직 성공하지 않은 : Link

Answer 1

이 내가 문제를 해결하는 방법입니다

CSS를

.row-fluid .fixed_pos { 
    position: fixed; 
    width: 80%; 
} 

보기

<div class="container-fluid"> 
    <!-- TOP BAR, FIXED --> 
    <div class="row-fluid"> 
     <div class="fixed_pos"> 
     <!-- MENUS --> 
      <div class="span12"> 
       <ul class="nav nav-tabs"> 
</appropriate endings..> 

마지막으로 상단 막대가 고정되어 반응합니다.

Answer 2

Add this code in bootstrap-responsive.css 

@media (max-width: 979px){ 
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed;} 
.container-fluid{ margin-top:70px;} 
}