html - 在导航栏上均匀分布搜索表单

Question

我需要水平组织一个搜索表单，所以我试图将它们放入导航栏中，但下面的代码不起作用。

我尝试使用表 col-sm-3, ，但它们都不起作用。

我想要连续 4 列。

你能帮忙吗？

  <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>

Answer 1

您可以使用以下 html 。 Bootstarpo 提供了水平和内联形式的 css，可以按如下方式使用:

水平形式:

<form class="form-horizontal">
<div class="form-group">
        <label for="inputEmail3" class="col-sm-1 control-label">Keywords</label>
        <div class="col-sm-2">
          <input type="email" placeholder="Keywords" id="inputEmail3" class="form-control">
        </div><label for="inputPassword3" class="col-sm-1 control-label">Location</label><div class="col-sm-2">
          <input type="password" placeholder="Location" id="inputPassword3" class="form-control">
        </div>
  <label for="inputPassword3" class="col-sm-1 control-label">Distance</label><div class="col-sm-2">
          <div class="radio-inline">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        &lt;= 3 <!--?php echo strKM; ?-->
        </label>
      </div> <div class="radio-inline">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
        &lt;= 3 <!--?php echo strKM; ?-->
        </label>
      </div>
        </div>
<div class="col-sm-3">
          <button class="btn btn-default" type="submit">Submit</button>
        </div>
</div>
   </form>

内联表单:

<form class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">keywords</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="keywords">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail2">Location</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Location">
          </div>
    <div class="form-group">
            <label for="exampleInputEmail2">Distance</label><div class="radio-inline">
            <label>
              <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">
            &lt;= 3 <!--?php echo strKM; ?-->
            </label>
          </div><div class="radio-inline">
            <label>
              <input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">
            &lt;= 3 <!--?php echo strKM; ?-->
            </label>
          </div>

          </div>
          <button class="btn btn-default" type="submit">Submit</button>
        </form>