부트 스트랩 붕괴가 급격히 변합니다.

Question

부트 스트랩 탐색 표시 줄에 문제가 있습니다. 붕괴 요소가 패딩에게 내가이 문제를 봤

을 가지고 있으며,이 문제가 패딩 것 같다 때 붕괴가 불안해 전환이 있습니다

사실

.menu-menu-container{ 
    padding: 100px 30px 60px 30px; 
    background-color: yellow; 
} 

전에서 패딩을 제거하는 경우 메뉴 - 메뉴 - 컨테이너 요소는 애니메이션이 잘 작동하고 매우 부드러운

이 내가 내 codepen>http://codepen.io/mp1985/pen/EyOJYE

어떻게이 이상한 문제없이 동일한 결과를 얻을 수 있습니까?

도움, 제안 또는 조언?

Answer 1

영향을받는 항목에 CSS 전환을 추가해보십시오. 그러면 브라우저가 다양한 패딩 사이에 애니메이션을 적용 할 때 전환이 점차 줄어들게됩니다. 각 CSS 속성은 고유 한 타이밍 속성을 사용하여 타겟팅 할 수 있습니다. 여기에서 모든 다양한 애니메이션 속성을 볼 수 있습니다 http://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful 
 
* { 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

Answer 2

그것 때문에 그것을 처리하는 코드 아래 340px 사용은 네비게이션 바 붕괴 클래스의 최대 높이의 발생. http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: none; 
} 

Answer 3

문제 는 당신이 붕괴되는 컨테이너의 패딩에 의해 발생합니다. 그것은 collapse.js에 의한 높이의 계산을 복잡하게

예 :

HTML

<div class="collapsible-div padding-values"> 
     // YOUR CONTENT 
    </div> 

은 내부에 패딩을 이동 경우이 고정됩니다

.padding-values{ 
    padding: 20px 40px 30px; 
} 

CSS 컨테이너 :

HTML

<div class="collapsible-div"> 
    <div class="new-container padding-values"> 
    // YOUR CONTENT 
    </div> 
</div>