Центрирование и позиционирование Bootstrap Brand и Navbar отзывчиво

Question

Я работаю над попыткой получить загрузочный навигатор, который выровнен по центру и на котором бренд остается центрированным после краха. Точно так же как ниже:

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

Первоначально из here

Однако, когда я делаю это для моей недавно созданной навигационной панели, кажется, бренд, который должен исчезнуть на большие экраны не и просто заканчивается сидит на вершине , Шахта ниже:

[My original fiddle][3] 

Я подозреваю, что его сделали с запросами средств массовой информации, но ив попробовал несколько вещей, но придумать пустым.

Любая помощь приветствуется

Answer 1

Прежде всего, вы должны добавить CSS после bootstrap.css.

Вот что вам нужно для правильного отображения:

.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; 
    } 
} 

EDIT: Чтобы скрыть первое с помощью CSS вы бы нуждаться в этом (но лучше использовать повторно .visible-desktop класс)

Вот CSS, чтобы скрыть от первого ребенка

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

Вот это fiddle

РЕДАКТИРОВАТЬ 2

.hidden-desktop элемент должен быть помещен перед .navbar-collapse<div>. Кроме того, я изменил CSS к этому:

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

+ Я раздвоенный & обновил свою скрипку ->UpdatedFiddle