我想用Bootstrap将屏幕分为左侧菜单和主菜单。
左侧菜单将为“col-md-2”，主菜单将为“col-md-10”，我想将主菜单设置为覆盖屏幕。
因此，我使用引导模式。正如您在我的下面的代码中看到的:
1-) 我无法在 Modal 类中使用 "col-md-xx" 类
2-) 如果我将 80% 宽度设置为 class="modal-dialog"，它几乎可以工作，但左侧位置错误
3-) 因此，我使用 jQuery 设置模式位置，但它现在仍然可以正常工作。
我知道这很难解释，但如果你检查下面的代码，我想你就会明白情况。
您对解决此问题有什么建议吗？
提前致谢。
<html lang="en">
<head>
<title>-</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#leftmenu,
#mainmenu {
border-style: solid;
}
</style>
<script>
var aa = 1;
$(document).ready(function () {
$("#myModal").modal({
backdrop: 'static'
});
$("#myModal2").width($("#mainmenu").width());
$("#myModal2").offset({
left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number)
})
});
</script>
</head>
<body>
<div class="row">
<div id="leftmenu" class="col-md-2">Left Menu</div>
<div id="mainmenu" class="col-md-10">
Main
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div id="myModal2" class="modal-dialog" style="width:80%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info btn-lg" id="myBtn2">Open Modal2</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
试试这个:
CSS:
.left-zero {
margin-left: 0 !important;
}
更改为 HTML:
<div id="myModal2" class="modal-dialog left-zero">
关于javascript - Bootstrap模态位置问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37483465/