Why is my bootstrap navbar not displaying inline?
This is because in Bootstrap the css for li is this:
.nav>li {
position: relative;
display: block;
}
But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.
EDIT: Updated the snippit to work as requested (see comments below this answer)
.navbar .container-fluid>.navbar-header {
float: left;
margin-right: 10px;
}
.navbar .navbar-nav {
float: left;
margin: 5px;
}
.nav>li {
float: left;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div style="display: inline-block;">
<ul class="nav navbar-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>Currently on Bootstrap 4. The flex layout seems to be columnar by default in my ecosystem as well.
The most direct override for this use case:
.navbar-nav {
flex-direction: row;
}