Twitter bootstrap Bootstrap 4模式弹出标题登录在单击时向右延伸

单击时，我的bootstrap 4登录在标题上弹出，一直延伸到右侧

这是我的链接代码：

   <li class="nav-item">
        <a class="nav-link btn btn-outline-info px-4 mt-1" data-toggle="modal" data-target="#loginModal1">Login</a>
        </li>

登录

这是我的模式代码：

<div class="modal fade" role="dialog" id="loginModal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Modal Login Form</h3>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="text" name="" class="form-control" placeholder="Username">
                        </div>

                        <div class="form-group">
                            <input type="password" name="" class="form-control" placeholder="Password">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-warning">Sign in</button>
                    </div>
                </div>
            </div>
        </div>

模式登录表单
&时代；
登录

当显示模式对话框时，引导的模式会自动将类

模式打开

添加到主体中，并在对话框隐藏时将其删除。它的功能由引导提供

这会使滚动条因引导css而消失：

.modal-open {
    overflow: hidden;
}

您可以通过指定

.modal-open {
    overflow: scroll;
}

在您自己的css中。这可能会解决你的问题

===============================
如我在评论中所述，如果您需要更多关于这方面的详细知识，请访问

正如上文所述，这对您很有用：

.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}

.modal-scrollbar-measure {

overflow: hidden;
}

---

通过在我的scss代码中添加此项修复

 .modal-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
    }

  .modal-scrollbar-measure {  
    overflow: hidden;
    }

---

您好@jerico，当点击模式按钮时，您想将导航条

主页

、

服务

和所有链接向右拉伸吗。对吗？Hello@yash，当我打开一个模式（单击顶部菜单上的登录）时，背景会一直向右移动和拉伸。我怎么能避免呢？但我不能像你说的那样在截图中看到。看，它不动了。只是由于模式弹出，您无法看到主页和服务，否则没有更改。它一直延伸到右侧，并溢出滚动条..我添加了答案。这对你有用吗？我在我的scss代码中添加了.modal open。。标题实际上可以工作，但当登录按钮点击时它仍然会移动，它会向左移动，因为当模式对话框打开时，它会隐藏从后面页面的滚动。更多信息请查看Hi@jerico，如果它有助于解决您的问题，您可以按预期进行投票或标记。