引导模态位置问题答案

【问题标题】：Bootstrap Modal Position issue引导模态位置问题
【发布时间】：2016-05-27 12:21:09
【问题描述】：

我想用 Bootstrap 将屏幕划分为 左菜单 和 主菜单。

左侧菜单将是 "col-md-2"，主菜单将是 "col-md-10"，我想将主菜单设为覆盖屏幕。

出于这个原因，我正在使用引导模式。正如您在下面的代码中看到的那样：

1-) 我不能在模态类中使用 "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">&times;</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>

【问题讨论】：

嗯它真的不清楚，你只是过度主要区域和模态不应该影响左栏正确吗？喜欢访问这里garhwalonline.com/alchemy并点击图片

标签： javascript jquery css bootstrap-modal

【解决方案1】：

试试这个：

CSS：

.left-zero {
    margin-left: 0 !important;
 }

改成HTML：

<div id="myModal2" class="modal-dialog left-zero">

【讨论】：

它正在工作.. 太好了！非常感谢@Md Mahfuzur Rahman