我有一个导航栏，可以在较小的屏幕和较大的屏幕上使用，通常可以在多个设备上使用。当我将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">×</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>
答案 0 :(得分：0)
我相信你正试图通过放置在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">×</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">×</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>