JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container-full">
  	<div class="navbar navbar-default">
  		<div class="navbar-header">  				
  		</div>
  		<ul class="nav navbar-nav">
  			<li class="some">
    			<div class="container-fluid">
  					<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 first">
  									
  					</div>
  				</div>
  			</li>
  			<li class="some">
  				<div class="container-fluid">
  					<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2 second">
  									
  					</div>
  				</div>
  			</li>  				
  		</ul>
  	</div>
</div>

CSS

.container-full {
	margin: 0 auto;
	width: 100%;
}
.first, .second {
    height: 47px;
}
.first {
	background-color: red;
}
.second {
	background-color: blue;
}