css - 向导航栏模态添加表单会增加间距(Bootstrap)

Question

我有一个导航栏，里面有一个模式。完成了。但是，我希望此模态成为一种形式。当我添加 <form>标签，但是，它搞砸了导航栏的间距。

这是原始的导航栏代码:

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

现在，当我添加 <form> div id="radios1" 周围的标签，它弄乱了导航栏本身。有人知道为什么吗？

Answer 1

为什么需要在导航栏中添加模态？您也可以在导航栏之后添加它。 http://www.bootply.com/96036即使在添加 form 标签后也能正常工作，就像你提到的那样。如果仍未解决您的问题，请提供屏幕截图和工作示例。