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标记后添加也工作正常。如果仍未解决您的问题，请提供截图和工作示例。

将形式添加到导航栏模态螺钉向上间距（Bootstrap）

1 个答案: