Bootstrap导航栏中的文本后跟按钮

Question

I would like to have some text, then a button, right aligned in a Bootstrap 3 navbar. I can add the corresponding components, but whatever I tried the result is ugly. I never managed to get it right so any help would be appreciated:

<div class="container-fluid">
    <div class="row">  
        <div class="navbar navbar-inverse">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="nav pull-right">
                <p class="navbar-text">text in navbar...</p>
                <button class="btn btn-info">then a button</button>
            </div>
        </div>
    </div>
</div>

The text looks ok but the button is stuck in the upper right corner.

Here is a link to bootply

Answer 1

Try adding the following CSS

.navbar .navbar-text{
   float: none;
   display: inline-block;
}

The default display property of .navbar-text is block , which is forcing it to be in a separate line.