HTML / Bootstrap Table on the flow and how to work around it

advertisements

I have a form wherein the user may search for example a name. after searching a table will come out. It works perfectly in the desktop but as you know I used bootstrap and it is responsive and usable in a mobile device. Now when I adjust the window size the nav bar collapses, design changes and becomes a mobile version. But then the table cannot go as small as the screen and it causes overflow on the right side. It cant go smaller because the words are long and cant we word wrapped with space because there is no space. So how do I make my nav bar and footer stretch to the width of the overflow?here is my sample interface...

<nav class="navbar navbar-inverse navbar-static-top" style="">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Envoy Search Rackings</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="<?php if(strpos($currentpage,"profile")==TRUE) {print $active;}
  ?>"><a href="profile.php">Search Database</a></li>
        <li class="<?php if(strpos($currentpage,"insert")==TRUE) {print $active;}
  ?>"><a href="insert.php">Add Brochure</a></li>
        <li><a href="export.php">Export Data Modified</a></li> 

      </ul>
      <ul class="nav navbar-nav navbar-right">

        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

and here is my nav bar code. my footer has no content yet so i'll just copy the code from navbar to strech just in case. Thank you very much! sorry if i explained too long!


If anybody stumbles upon this and just wants to make the table fit the device width:

Use <div class="table-responsive"> ... </div> around your <table> tags.

Not sure if this is what the OP wants, but I hope it helps anyone anyway :D