Bootstrap 3 Складной текст Navbar и ссылки Не выравнивание

Question

У меня возникли проблемы с сохранением текста с пометкой class="navbar-text" в соответствии с другими ссылками на навигационной панели. Строительство прочь Bootstrap 3 example for a fixed top navbar, я заметил, что в любое время шириной браузера < 768 пикселей, элементы разборного меню отображает текст без надлежащего расстояния и боднул против первой ссылки в меню:

(http://www.bootply.com/98784)

текст «Бизнес-услуги» Инфраструктура является <p> с тегами class="navbar-text", как рекомендуется для text strings in navbars. Он отлично выглядит, когда он не сбрасывается (ширина браузера> 768 пикселей). И, когда я пытаюсь пометить текст как <a>, стилизация в порядке, и все выглядит хорошо. Но это не значит, что это ссылка, а простая строка текста. Я также попытался переместить <p> из <ul>, но он все еще выглядит странным. Любые предложения о том, как разрешить это, будут весьма признательны. Благодаря!

Редактировать 12/5/13: Прошу прощения, если я не понял, чего я пытался достичь. В принципе, я хотел бы, чтобы <p class="navbar-text"> появиться на отдельной строке, так же как и другие звенья в <ul>, как это:

Редактировать 12/6/13: С момента выхода Bootstrap v. 3.0.3, эта проблема частично решена. Появится строка текста на отдельной строке, но не имеет надлежащего отступа (См https://github.com/twbs/bootstrap/issues/11735):

Answer 1

Я действительно не знаю, почему у вас возникли проблемы с планировкой Bootstrap, но вы просто нужно получить два типа стилей элементов синхронизированных на мобильных размерах:

Demo

@media (max-width: 767px) {  
    p.navbar-text { 
     margin: 0; 
     padding: 10px 15px; 
    } 
    .navbar li { 
     overflow: hidden; 
    } 
} 

---

Обновление: оригинальные скрипки были потеряны, поэтому я попытался их воссоздать. В ответ на комментарий OP о Bootstrap v3.0.3, оператор переполнения можно устранить.

Demo 2