JSFiddle - React, Tailwind, and code Playground
HTML
<div class="head">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Apri Menu</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="">IscrOnline</a>-->
<p class="navbar-text">CENTRO SPORT.LE OLIMPIADI S.S.D Arl</p>
<p class="navbar-text"></p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.php"><span class="glyphicon glyphicon-home"></span>Elenco Manifestazioni</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/admin/" style="margin-right: 10px;"><span class="glyphicon glyphicon-user"></span>Organizzatori</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<div id="wrap"> <div class="container" style="width: 90%;"> <!-- style="min-width: 1450px;"-->
<div class="panel panel-info table-responsive">
<div class="panel-heading">NUOTO</div>
<table class="table table-hover table-condensed">
<thead>
<th>#</th>
<th>NOME MANIFESTAZIONE</th>
<th>CITTA'</th>
<th>LIVELLO</th>
<th>DATA</th>
<th>FINE ISCRIZIONI</th>
<th>GARE INDIVIDUALI</th>
<th>STAFFETTE</th>
<th>DA PAGARE</th>
<th>OPERAZIONI</th>
</thead>
<tbody>
<tr class="warning">
<td>232</td>
...
CSS
.label,.glyphicon {
margin-right:5px;
}
body {
padding-top: 65px;
}
.box {
margin-bottom: 20px;
position: relative;
width: 100%;
}
@media only screen and (max-device-width: 750px) {
body {
padding-top: 130px;
}
}
html, body {
height: 100%;
}
#wrap {
min-height: 90%;
}
.footer {
position: relative;
margin-top: -100px;
height: 100px;
clear:both;
padding-top:20px;
background-color: #eee;
}