Css 将表单添加到navbar模式螺钉向上间距（引导）

我有一个导航条，里面有一个模态。完成了。然而，我希望这个模态是一种形式。但是，当我添加

标记时，它会使导航栏的间距变大

以下是原始导航条形码：

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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="/index">Foo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <form class="navbar-form navbar-right" role="search">
    <button class="btn btn-success" data-toggle="modal" data-target="#filterModal"><i class="icon-white icon-th"></i>Filtered Search</button>
    <!--Filter Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Select Entities to Search For</h4>
          </div>
          <div class="modal-body">

            <div id ="radios1" class="form-group" data-toggle="buttons">
              <button id="farms_radio" type="button" name="option" value="first" class="btn btn-success">First</button>
              <button id="fields_radio" type="button" name="option" value="second" class="btn btn-success">Second</button>
              <button id="cropzones_radio" type="button" name="option" value="third" class="btn btn-success">Third</button>
              <input type='hidden' name="choices" value={{request.form['choices']}} />
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="filter_search" type="button" class="btn btn-success">Search</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div><!-- /.navbar-collapse -->

切换导航
过滤搜索
&时代；
选择要搜索的实体
弗斯特
第二
第三
接近
搜寻
提交

---

现在，当我在

div id=“radios1”

周围添加

标记时，它会弄乱导航栏本身。有人知道为什么吗？

为什么需要在导航栏内部添加模态？您也可以将其添加到导航栏之后。即使如您所述添加了

表单

标记，也可以正常工作。如果它仍然没有解决您的问题，请提供一个屏幕截图和一个工作示例。

是否创建一个小提琴？+1，并接受我的想法，即不在导航栏中包含模态，它解决了问题