添加窗体到导航栏模式螺丝向上间距（引导）

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

现在，当我加入div id="radios1"围绕<form>标签，它打乱了导航栏本身。有人知道为什么

Answer 1

为什么你需要在导航栏本身添加模态？您也可以在导航栏后添加它。即使在添加form标记之后，http://www.bootply.com/96036仍然正常工作。如果问题仍未解决，请提供屏幕截图以及工作示例。