Переходы с помощью Twitter Bootstrap

Я использую Bootstrap для базового веб-сайта, над которым я работаю.Переходы с помощью Twitter Bootstrap

Вот мой Demo: http://jsfiddle.net/sk6g3ykp/1/

Чтобы лучше видеть мой вопрос, вот полная страница: https://jsfiddle.net/sk6g3ykp/1/embedded/result/. Моя проблема заключается в том, что если вы измените размер этой полной страницы до тех пор, пока не увидите значок гамбургера, а затем измените его размер до размера рабочего стола - посмотрите, как номер телефона больше не выровнен. Почему это?

Вот мой CSS:

.navbar-default { 
    border-color: transparent; 
    background-color: #222; 
} 

.navbar-default .navbar-brand { 
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; 
    color: #1b7ae0; 
} 

.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus, 
.navbar-default .navbar-brand:active, 
.navbar-default .navbar-brand.active { 
    color: #1b7ae0; 
} 

.navbar-default .navbar-collapse { 
    border-color: rgba(255,255,255,.02); 
} 

.navbar-default .navbar-toggle { 
    border-color: #1b7ae0; 
    background-color: #1b7ae0; 
} 

.navbar-default .navbar-toggle .icon-bar { 
    background-color: #fff; 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #1b7ae0; 
} 

.navbar-default .nav li a { 
    text-transform: uppercase; 
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: 400; 
    letter-spacing: 1px; 
    color: #fff; 
} 

.navbar-default .nav li a:hover, 
.navbar-default .nav li a:focus { 
    outline: 0; 
    color: #1b7ae0; 
} 

/*.navbar-default .navbar-nav>.active>a { 
    border-radius: 0; 
    color: #fff; 
    background-color: #1b7ae0; 
}*/ 

.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus { 
    color: #fff; 
    background-color: #1b7ae0; 
} 

@media(min-width:768px) { 
    .navbar-default { 
     padding: 25px 0; 
     border: 0; 
     background-color: transparent; 
     -webkit-transition: padding .3s; 
     -moz-transition: padding .3s; 
     transition: padding .3s; 
    } 

    .navbar-default .navbar-brand { 
     font-size: 2em; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     transition: all .3s; 
    } 

    .navbar-default .navbar-nav>.active>a { 
     border-radius: 3px; 
    } 

    .navbar-default.navbar-shrink { 
     padding: 10px 0; 
     background-color: #222; 
    } 

    .navbar-default.navbar-shrink .navbar-brand { 
     font-size: 1.5em; 
    } 
} 


    .navbar-inverse { 
     background:transparent; 
     border:0; 
    } 

    .navbar-default .nav li a { 
     text-transform:none; 
     font-weight: 300; 
     font-size: 1.1em; 
    } 

    .nav>li>a { 
     padding:10px 20px; 
    } 

    .navbar-default{ 
     text-align:center; 
     margin-top:30px; 
    } 
    .navbar-center{ 
     display: inline-block; 
     float: none; 
    } 

     .navbar-center p { 
      font-weight: 300; 
      font-size: 1.1em; 
      color:#fff; 
      padding:10px 20px 
     } 

    @media(max-width:768px) { 
     .navbar-default { 
      margin-top:0px!important; 
     } 
     .navbar-center { 
      display:none  
     } 
    } 

    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
     background:transparent; 
     color:#fff; 
    } 


.navbar-brand { 
    width:265px; 
    height:37px; 
    background: url('/wp-content/themes/gf/assets/img/logo.png') 0 0 no-repeat; 
} 

@media(max-width:480px) { 
.navbar-brand { 
    width:74px; 
    height:37px; 
    background: url('/wp-content/uploads/2015/03/logo2.png') 0 0 no-repeat; 
} 
} 

nav { 
    background:red!important 
}

Большое спасибо за каких-либо указаний.

источник

2015-03-20 michaelmcgurk

Это не происходит в моем хромом. Могу ли я узнать, какой браузер вы используете? – Sriraman

Да, я также использую Chrome. Самая последняя версия. Вы пробовали изменить его размер с полной ширины до мобильных и резервных копий? Номер телефона переместился вверх. – michaelmcgurk

Я попробовал. Я использую Chrome Version 41.0.2272.89 (64-разрядный) + Mac os x yosemite – Sriraman

Вы добавили дополнительные css, чтобы выравнивать текстовый центр. Из-за относительной позиции он ломается.

Следующий код решит это.

.navbar-center{ 
    display: inline-block; 
    position: absolute; 
    left: 50%; 
    margin-left: -140px; 
}

Обновлено jsFiddle: https://jsfiddle.net/sk6g3ykp/4/

источник

2015-03-20 07:06:26 Sriraman

Переходы с помощью Twitter Bootstrap

ответ

Смежные вопросы