StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBootstrap 3 Collapsible Navbar Text and Links Not Aligning
text
Body
copied!<p>I'm having trouble keeping text tagged with <code>class="navbar-text"</code> in line with other links in the navbar. Building off of the <a href="http://getbootstrap.com/examples/navbar-fixed-top/" rel="nofollow noreferrer">Bootstrap 3 example for a fixed top navbar</a>, I noticed that any time the browser width is <768 pixels, the collapsible menu items shows the text without the proper spacing and butted up against the first link in the menu:</p> <p><img src="https://i.stack.imgur.com/sgi7g.png" alt="Misaligned navbar"></p> <p>(<a href="http://www.bootply.com/98784" rel="nofollow noreferrer">http://www.bootply.com/98784</a>)</p> <p>The text "Business Infrastructure Services" is a <code><p></code> tagged with <code>class="navbar-text"</code> as recommended for <a href="http://getbootstrap.com/components/#navbar-text" rel="nofollow noreferrer">text strings in navbars</a>. It looks fine when it is not collapsed (browser width >768 pixels). And, when I try to tag the text as an <code><a></code>, the styling is fine and everything looks good. But, it's not meant to be a link, but rather a simple string of text. I've also tried moving the <code><p></code> out of the <code><ul></code>, but it still shows up weird. Any suggestions on how to resolve this would be greatly appreciated. Thanks!</p> <p><strong>Edit 12/5/13:</strong> I apologize if I was unclear in what I was trying to achieve. Basically, I'd like the <code><p class="navbar-text"></code> to appear on its own line, just like the other links in the <code><ul></code>, like this:</p> <p><img src="https://i.stack.imgur.com/kkvYP.png" alt="How the navbar should look"></p> <p><strong>Edit 12/6/13:</strong> Since the release of Bootstrap v. 3.0.3, this issue is partially resolved. The text string now appears on its own line, but doesn't have the proper indentation (See <a href="https://github.com/twbs/bootstrap/issues/11735" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/issues/11735</a>):</p> <p><img src="https://i.stack.imgur.com/TQDgI.png" alt="Text on its own line, but not indented properly"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload