引导模式页脚中的水平线超过了窗口

Question

我想在Bootstrap 4模态中制作一个迷你表单，但由于某种原因，模态的页脚边框顶部似乎超出了模态宽度。如何使页脚的边框顶部保持在正确的宽度？我找到了这个主题，它解释了如何完全删除它，但理想情况下，我不会删除它，只是让它保持正确的宽度。

Js报价：https://jsfiddle.net/3qp82myL/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
Open modal
</button>
<div class="modal fade" id="loginModal" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="#">
<div class="modal-header"><h4 class="modal-title">That Page Needs Logging In</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
<div class="modal-body">
<div class="form-group"><input name='email' type="text" class="form-control" placeholder="Email"></div>
<div class="form-group"><input name='password' type="password" class="form-control" placeholder="Password"></div>
</div>
<div class="modal-footer row align-items-center justify-content-center">
<input type="submit" class="btn btn-primary btn-lg btn-shadow-blue d-inline" value="Log In" id="login-modal-submit">
<input type="button" class="btn btn-outline-primary btn-lg btn-shadow-blue d-inline" data-dismiss="modal" value="Cancel" id="login-modal-cancel">
</div>
</form>
</div>
</div>
</div>

Answer 1

只需从模式页脚div中删除行类。

固定html:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
Open modal
</button>
<div class="modal fade" id="loginModal" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="#">
<div class="modal-header"><h4 class="modal-title">That Page Needs Logging In</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
<div class="modal-body">
<div class="form-group"><input name='email' type="text" class="form-control" placeholder="Email"></div>
<div class="form-group"><input name='password' type="password" class="form-control" placeholder="Password"></div>
</div>
<div class="modal-footer align-items-center justify-content-center">
<input type="submit" class="btn btn-primary btn-lg btn-shadow-blue d-inline" value="Log In" id="login-modal-submit">
<input type="button" class="btn btn-outline-primary btn-lg btn-shadow-blue d-inline" data-dismiss="modal" value="Cancel" id="login-modal-cancel">
</div>
</form>
</div>
</div>
</div>