JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button class="btn btn-navbar collapsed" type="button" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav row-fluid">
<li class="span3"><a href="#">Home</a>
</li>
<li class="span3"><a href="#">About Us</a>
</li>
<li class="span3"><a href="#">Our Stuff</a>
</li>
<li class="span3"><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- This is not part of the solution, just a helper to see what the frame width is
< 768 = Phone
768 - 979 = Tablet
980+ = Desktop -->
<div><span id="currentWidth" />
</div>
CSS
.navbar-inner {
background: none;
border: none;
}
.nav li {
background: #ccc;
text-align: center;
}
@media (max-width: 979px) and (min-width: 768px) {
.navbar [class*="span"], .navbar .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
JavaScript
//This is not part of the solution, just a helper to see what the frame width is
// < 768 = Phone
// 768 - 979 = Tablet
// 980+ = Desktop
$(document).ready(function () {
$("#currentWidth").text("Window Width: " + $(window).width());
$(window).resize(function () {
$("#currentWidth").text("Window Width: " + $(window).width());
});
});