带有垂直按钮和表单的引导导航栏

Question

我对 HTML 很熟悉，并且正在学习 Bootstrap (ver3)。我有一个顶部带有 NAV-BAR 的页面。在此之下，我有一个带有“提交按钮 2”的多选下拉列表。最初，我在多选框周围有一组 FORM 标签。单击提交按钮 2 时，它按预期执行并显示 POST 值。

在标准 NAV-BAR 示例中，它们在 NAV-BAR 按钮周围有 FORM 标签。当我进行此配置时，单击提交按钮 1 时，POST 未收集多选值。这很明显，因为多选框不在 NAV-BAR FORM 标签之间。他们有自己的一套 FORM 标签。

所以对于下面的示例，我只有一组 FORM 标签，它们位于我的 BODY 标签的顶部和底部。现在，两个提交按钮都会收集 POST 值。

但是，它们有一个不好的副作用。使用比我的手机更大的视口，NAV-BAR 上的三个按钮垂直堆叠。我需要它们是水平的。我已经看到了可以使用 span 标签进行的修复，但我看不出它是如何满足我的需要的。

在我的最后一页中，我将有 3 组单选按钮和两个多选下拉框。任何帮助将不胜感激。

谢谢丹

$('#example-post').multiselect({
  includeSelectAllOption: true,
  enableFiltering: true
});

$('#example-post').search1({
  includeSelectAllOption: true,
  enableFiltering: true
});
$('#example-post').search2({
  includeSelectAllOption: true,
  enableFiltering: true
});

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Multiselect search-test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
</head>

<body>
  <form name="form1" method="post">
    <center>
      <br><br><br> <br><br><br>
      <!-- needed to bring down the multi-select below the menu bar --->
      <?php
                      echo '--------------------------- search test ----------------------------<br>';
                      print_r($_POST);
                      echo '<br>---------------------------------------------------------------------<br>';
         ?>

        <div>
          <nav class="navbar navbar-inverse navbar-fixed-top navbar-right" role="navigation">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                               <span class="sr-only">Toggle navigation</span>
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
    
                            </button>
                <a class="navbar-brand" href="#">Our Search Engine</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse navbar-right">
                <button type="submit" class="btn btn-success form-control" name="search2">Submit Button 1</button>
                <button type="submit" class="btn btn-success form-control" name="Something">Something</button>
                <button type="submit" class="btn btn-success form-control" name="Quit">Quit</button>
              </div>
            </div>
          </nav>

          <div class="container-fluid">
            <div class="row">
              <h3>Select<br></h3>
              <select id="example-post" name="multiselect[]" multiple="multiple" required>
                            <option value="Jenny">Jenny</option>
                            <option value="Mary" selected>Mary</option>
                            <option value="Cathy">Cathy</option>
                         </select>
              <button type="submit" class="btn btn-success" name="search2">Submit Button 2</button>
            </div>
            <!-- row -->
          </div>
          <!-- container---->
        </div>
    </center>
    </div>
  </form>

</body>

</html>

Answer 1

您应该从按钮 <button type="submit" class="btn btn-success form-control" name="search2">Submit Button 1</button> 中删除 form-control