부트 스트랩 브랜드 및 Navbar의 응답 및 위치 지정

Question

나는 중앙 정렬 된 부트 스트랩 navbar를 얻으려고 노력 중이며 브랜드는 붕괴 후 중앙에 위치합니다. 정확히 아래와 같이 : here

에서 원래

[Original Stack fiddle on centering the navbar][1] 

그러나 내가 갓 만든 네비게이션 바로 할 때 그것을 꼭대기에 앉아 끝하지 그냥 않는 더 큰 화면에서 사라질 것으로 예상되는 브랜드를 보인다 . 내 위치는 다음과 같습니다.

[My original fiddle][3] 

나는 미디어 쿼리를 통해 판단 할 수 있지만 몇 가지 시도를했지만 비어 있습니다.

어떤 도움 당신은 bootstrap.css 후 CSS를 추가해야합니다 모든

Answer 1

먼저 감사합니다. 여기

는 적절한 디스플레이에 필요한 것입니다 :

.hidden-desktop { 
    display: none !important; 
} 
.visible-desktop { 
    display: inherit !important; 
} 
@media (max-width: 979px){ 
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a { 
      padding: 9px 15px; 
      font-weight: bold; 
      color: #777777; 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
    } 
} 
@media (max-width: 979px){ 
    .navbar .brand { 
      padding:10px; 
      margin: 0 0 0 -5px; 
    } 
} 
@media (max-width: 767px){ 
    .hidden-desktop { 
      display: inherit !important; 
    } 
} 

편집 : 당신이 하나를 필요 CSS와 첫 숨기려면 (하지만이 .visible-desktop 클래스 다시 사용하는 것이 좋습니다)

을

여기 여기

@media (max-width: 768px){ 
    #twitterbootstrap .navbar .nav > li:first-child{ 
     display: none ; 
    } 
} 

가첫 번째 아이에게 숨길 수있는 CSS입니다 10

EDIT 2

.hidden-desktop 요소 .navbar-collapse<div> 앞에 위치한다. 는 또한 나는이에 CSS를 변경 :

@media (max-width: 767px){ 
     .hidden-desktop { 
      display: inherit !important; 
      padding: 15px; 
      margin: 0 0 0 -5px; 
     } 
} 

+ 내가 &이 바이올린을 업데이트 포크했습니다 ->UpdatedFiddle