evenly distribute a search form on navbar

I need to organize a search form horizontally so I tried to put them into a nav bar but code below is not working.

I tried to use tables, col-sm-3, , but none of them is working.

Can you please help?

  <div class="container-fluid">
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
  <form class="navbar-form navbar-left" role="search" name="form_search" id="form_search" action="<?php echo lnkSearch; ?>" method="post">
    <table style="width:100%">
      <tr>
      <td><label>Keyword</label></td>
      <td><input type="text" class="form-control" placeholder="Keyword"></td>
      <td><label>Location</label></td>
      <td><input type="text" class="form-control" placeholder="Location"></td>
      <td><label>Distance</label></td>
      <td><div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        &lt;= 3 <?php echo strKM; ?>
        </label>
      </div>
      </td>
      <td>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            &gt; 3 <?php echo strKM; ?>
        </label>
      </div>
      </td>
      <td>
    <button type="submit" class="btn btn-default">Submit</button>
    </td>
    </tr></table>
  </form>
</div>
</div>


Source: css

Leave a Reply