Bootstrap won't stop adding a second row to my navbar - html

Question

I have the following HTML:
<nav class="navbar pr-navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="row">
<div class="navbar-left">
<a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a>
</div>
<div class="navbar-right">
<a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a>
</div>
<p class="pr-navbar-text">Manage/Add Users</p>
<div class="navbar-right">
<div class="pr-add-item">
<a plat-tap='addUser()'><span class="fui-plus"></span></a>
</div>
</div>
</div>
</div>
</nav>
Coupled with the following LESS:
#primaryColor: red;
#secondaryColor: blue;
#borderColor: white;
#textColor: white;
.pr-back{
color: #textColor;
}
.pr-home{
color: #textColor;
}
.pr-navbar-text{
color: #textColor;
text-align: center;
}
.pr-navbar {
background-color: #secondaryColor;
background-image: none;
background-repeat: no-repeat;
filter: none;
}
body { padding-top: 75px; }
#media screen and (max-width: 768px) {
body { padding-top: 53px; }
}
.pr-add-item {
padding-right: 75px
}
For some reason, the row element in my HTML does nothing. The plus icon is always put on a row beneath all the other buttons. How can I fix this so I have one row with a left aligned button, a center text, and two right aligned buttons?

Answer 1

Here, I started a fiddle for this.
JSFiddle here
<nav class="navbar pr-navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="nav navbar-nav navbar-left">
<a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a>
</div>
<div class="nav navbar-nav navbar-right">
<a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a>
</div>
<p class="nav navbar-nav pr-navbar-text">Manage/Add Users</p>
<div class="nav navbar-nav navbar-right">
<div class="pr-add-item">
<a plat-tap='addUser()'><span class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</nav>
This HTML is closer to what you want. There were some unnecessary tags included in your original HTML, and also some important tags (like nav and navbar-nav) that were excluded. I suggest you read over this section of the bootstrap components page to understand how to get NavBars to work more cooperatively.
(I changed the glyph for your plus button and back arrow button so something would show up without including flat ui).
Edit: Altered the JSFiddle so that the text could be centered in the navbar.