小屏幕尺寸时的引导导航栏文本对齐问题

Question

Using this navbar code. (simplified, but confirmed to have the same issue).

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'home' %}">Kanri</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Dashboard</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="navbar-text">
                        John Smith
                    </li>
                    <li>
                        <a class="glyphicon glyphicon-cog"></a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div>

When placed in a smaller screen, the navbar (as expected) toggles down to a massive dropdown. John Smith does not have left padding, causing it to sit just on the edge of the left size of the screen, which is unaesthetic. Is there something I'm forgetting to wrap it in?

Here's an example. Kye is where John Smith should be as this is a screenshot from the running application. I simplified the code for readability but ensured that the same issue occurs.

Answer 1

You'll need to wrap that name in an anchor tag or provide some custom CSS styling to the unordered list tag to provide the Padding.

<li class="navbar-text">
   <a href="#">John Smith</a>
</li>

Here's a working demo of your code; http://www.bootply.com/NiumLenXsu