添加模态表单时，Bootstrap Navbar无法折叠

Question

我有一个导航栏，可以在较小的屏幕和较大的屏幕上使用，通常可以在多个设备上使用。当我将Modal表单添加到我的Navbar时，它无法在较小的屏幕上崩溃，除非它在它工作之前稍微缩放，即便如此，并非所有链接都是响应式的。当我删除包含模态窗体的div时，它的工作原理就像它应该工作一样。拜托，任何人都可以帮我弄清楚我错过了什么。谢谢你

<div class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="/"><%= __('Borrowing Sys') %></a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li id="home"><a href="/"><%= __('Home') %></a></li>
            </ul>
            <ul class="nav pull-left">
                <li class="dropdown">
                    <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-expanded="false"><%= __('Offer') %><span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/itemoffers"><%= __('Offer Item') %></a></li>
                        <li><a href="/recallitem"><%= __('Recall Item') %></a></li>
                        <li><a href="/renewitem"><%= __('Renew Item') %></a></li>
                        <li><a href="/returnitem"><%= __('Return Item') %></a></li>
                        <li class="divider"></li>
                        <li><a href="/guestitemoffers"><%= __('Guest Offer') %></a></li>
                        <li><a href="/shareitem"><%= __('Share Item') %></a></li>
                        <li><a href="/manage/manageoffers"><%= __('Manage Offers') %></a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-expanded="false"><%= __('Discover Items') %><span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/discoverymap"><%= __('Discovery Map') %></a></li>
                        <li><a href="/Asktobuy"><%= __('Send a Request') %></a></li>
                        <li><a href="/shareditems/availableoffer"><%= __('Available Items') %></a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-expanded="false"><%= __('Messages') %><span
                                class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/messages"><%= __('Private Messages') %></a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-expanded="false"><%= __('System Overview') %><span
                                class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/analysis"><%= __('Data Analysis') %></a></li>
                        <li><a href="/activitylog"><%= __('User Activity Logs') %></a></li>
                        <li class="divider"></li>
                        <li><a href="/manage/removeoffers"><%= __('Remove Offers') %></a></li>
                        <li><a href="/checkrequest"><%= __('Students Request') %></a></li>

                    </ul>
                </li>
                <li class="dropdown">
                    <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-expanded="false"><%= __('My Account') %><span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/offers/myoffers"><%= __('Your Offers') %></a></li>
                        <li><a href="/checkreservations"><%= __('Reservations') %></a></li>
                        <li class="divider"></li>
                        <li><a href="/user"><%= __('My Profile') %></a></li>
                        <li><a href="/InviteFriend"><%= __('Invite Friend') %></a></li>
                        <li><a href="/logout"><%= __('Log out') %></a></li>
                    </ul>
                </li>
                <!--add search form-->
                <div class="col-sm-3 col-md-3 pull-right">
                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="<%= __('Student ID') %>"
                                   Id="SearchStudent" name="SearchStudent">
                            <button id="Search" name="Search" class="btn btn-primary"
                                    type="button"><%= __('Check Clearance') %>
                            </button>
                        </div>
                    </form>
                </div>

            </ul>
        </div>
        <!--/.nav-collapse -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="color: #006dcc"><%=__('Verify Student Clearance')%></h4>
                    </div>
                    <div class="modal-body">
                        <div id="Cleared">
                            <p style="color: darkgreen" align="center"><%=__('Student has returned all Items borrowed')%></P>

                        </div>
                        <div id="NotCleared">
                            <p style="color: Red" align="center"><%=__('Student has not returned all items borrowed')%> <h6><%('Borrowed Items')%></h6> </p>

                        </div>
                        <div id="NoStudentID">
                            <p style="color: Red" align="center"><%=__('Please enter student ID/matriculation number')%> </p>

                        </div>
                        <div id="Privilege">
                            <p style="color: darkred" align="center"><%=__('Sorry,you do not have enough privileges to access this information')%></P>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><%=__('Close')%></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我相信你正试图通过放置在navbar上的按钮启动模态。您需要将实际模态放在导航栏之外，而不是放在导航栏内。该按钮是唯一应位于navbar内的部分。如果单击“检查清除”，模式将启动。

我还重构了你的HTML，因此它与Bootstrap默认值一致，我也提供了另一种布局，因为你有很多导航链接，你会看到你的navbar开始向下推到新的一行。由于空间限制，视口发生了变化。有关替代布局，请参见第二个示例。

默认Navbar示例使用模态＆gt;见Docs。

body {
  padding-top: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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="#">Borrowing Sys</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li id="home"><a href="/">HOME</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Offer <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="/itemoffers">Offer Item</a>

            </li>
            <li><a href="/recallitem">Recall Item</a>

            </li>
            <li><a href="/renewitem">Renew Item</a>

            </li>
            <li><a href="/returnitem">Return Item</a>

            </li>
            <li class="divider"></li>
            <li><a href="/guestitemoffers">Guest Offer</a>

            </li>
            <li><a href="/shareitem">Share Item</a>

            </li>
            <li><a href="/manage/manageoffers">Manage Offers</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Discover Items <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="/discoverymap">Discovery Map</a>

            </li>
            <li><a href="/Asktobuy">Send a Request</a>

            </li>
            <li><a href="/shareditems/availableoffer">Available Items</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Messages <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="/messages">Private Messages</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Overview <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="/analysis">Data Analysis</a>

            </li>
            <li><a href="/activitylog">User Activity Logs</a>

            </li>
            <li class="divider"></li>
            <li><a href="/manage/removeoffers">Remove Offers</a>

            </li>
            <li><a href="/checkrequest">Students Request</a>

            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="/offers/myoffers">Your Offers</a>

            </li>
            <li><a href="/checkreservations">Reservations</a>

            </li>
            <li class="divider"></li>
            <li><a href="/user">My Profile</a>

            </li>
            <li><a href="/InviteFriend">Invite Friend</a>

            </li>
            <li><a href="/logout">Log out</a>

            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Student ID" Id="SearchStudent" name="SearchStudent"> <span class="input-group-btn">
        <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal">Check Clearance</button>
      </span>

        </div>
      </form>
    </div>
  </div>
</nav>
</div>
<div class="container">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

          </button>
          <h4 class="modal-title" style="color: #006dcc">Verify Student Clearance</h4>

        </div>
        <div class="modal-body text-center">
          <div id="Cleared">
            <p style="color: darkgreen">Student has returned all Items borrowed</P>
          </div>
          <div id="NotCleared">
            <p style="color: Red">Student has not returned all items borrowed
              <h6>Borrowed Items</h6> 
            </p>
          </div>
          <div id="NoStudentID">
            <p style="color: Red">Please enter student ID/matriculation number</p>
          </div>
          <div id="Privilege">
            <p style="color: darkred">Sorry,you do not have enough privileges to access this information</P>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="well">Content</div>
</div>

替代Navbar示例与模态

body {
  padding-top: 120px;
}
.navbar-inverse.nav-top ul {
  display: inline-block;
  float: right;
}
@media (min-width: 768px) {
  .navbar.navbar-lower .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-lower .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-lower .navbar-nav > li > a {
    text-align: center;
  }
  .navbar.navbar-lower .dropdown-menu {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-fixed-top">
  <nav class="navbar-inverse nav-top">
    <div class="container-fluid"><a class="navbar-brand hidden-xs" href="#">Borrowing Sys</a>

      <ul class="nav navbar-top">
        <form class="navbar-form" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Student ID" Id="SearchStudent" name="SearchStudent"> <span class="input-group-btn">
        <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal">Check Clearance</button>
      </span>

          </div>
        </form>
      </ul>
    </div>
  </nav>
  <nav class="navbar navbar-inverse navbar-static-top navbar-lower">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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 visible-xs-block" href="#">Borrowing Sys</a>

      </div>
      <div class="collapse navbar-collapse" id="bs-nav">
        <ul class="nav navbar-nav">
          <li id="home"><a href="/">HOME</a>

          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Offer <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="/itemoffers">Offer Item</a>

              </li>
              <li><a href="/recallitem">Recall Item</a>

              </li>
              <li><a href="/renewitem">Renew Item</a>

              </li>
              <li><a href="/returnitem">Return Item</a>

              </li>
              <li class="divider"></li>
              <li><a href="/guestitemoffers">Guest Offer</a>

              </li>
              <li><a href="/shareitem">Share Item</a>

              </li>
              <li><a href="/manage/manageoffers">Manage Offers</a>

              </li>
            </ul>
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Discover Items <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="/discoverymap">Discovery Map</a>

              </li>
              <li><a href="/Asktobuy">Send a Request</a>

              </li>
              <li><a href="/shareditems/availableoffer">Available Items</a>

              </li>
            </ul>
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Messages <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="/messages">Private Messages</a>

              </li>
            </ul>
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System Overview <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="/analysis">Data Analysis</a>

              </li>
              <li><a href="/activitylog">User Activity Logs</a>

              </li>
              <li class="divider"></li>
              <li><a href="/manage/removeoffers">Remove Offers</a>

              </li>
              <li><a href="/checkrequest">Students Request</a>

              </li>
            </ul>
          </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="/offers/myoffers">Your Offers</a>

              </li>
              <li><a href="/checkreservations">Reservations</a>

              </li>
              <li class="divider"></li>
              <li><a href="/user">My Profile</a>

              </li>
              <li><a href="/InviteFriend">Invite Friend</a>

              </li>
              <li><a href="/logout">Log out</a>

              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<div class="container">
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

          </button>
          <h4 class="modal-title" style="color: #006dcc">Verify Student Clearance</h4>

        </div>
        <div class="modal-body text-center">
          <div id="Cleared">
            <p style="color: darkgreen">Student has returned all Items borrowed</P>
          </div>
          <div id="NotCleared">
            <p style="color: Red">Student has not returned all items borrowed
              <h6>Borrowed Items</h6> 
            </p>
          </div>
          <div id="NoStudentID">
            <p style="color: Red">Please enter student ID/matriculation number</p>
          </div>
          <div id="Privilege">
            <p style="color: darkred">Sorry,you do not have enough privileges to access this information</P>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="well">Content</div>
</div>