在一个页面显示多个模态框时要讲每个模态框用div包裹起来，否咋会产生格式错误。
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/bootstrap.js"></script> </head> <body> <div> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#excel">下载Excel模板</button> <!-- Excel模态框（Modal） --> <div class="modal fade" id="excel" 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">×</button> <h4 class="modal-title" id="myModalLabel">下载Excel模板</h4> </div> <form action="${pageContext.request.contextPath }/exportWebExcel" method="post"> <div class="modal-body"> 单选题数量: <input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量: <input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <input type="submit" class="btn btn-primary" value="确认"> </div> </form> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> <p></p> <!-- -------------------多个模态框样式套用有冲突，解决的办法很简单，用DIV将每个dialog的代码片段包裹一下-------------------------------------------- --> <p></p> <div> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#wordMT">下载Word模板</button> <!-- Excel模态框（Modal） --> <div class="modal fade" id="wordMT" 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">×</button> <h4 class="modal-title" id="myModalLabel">下载Word模板</h4> </div> <form action="${pageContext.request.contextPath }/exporWebWord" method="post"> <div class="modal-body"> 单选题数量: <input type="text" name="danxuan" value="" title="请输入单选题数量" /> <br /> <br /> 多选题数量: <input type="text" name="duoxuan" /> <br /> <br /> 判断题数量:<input type="text" name="panduan" /><br /> <br /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <input type="submit" class="btn btn-primary" value="确认"> </div> </form> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> </body> </html>