ブートストラップモーダルフッターの水平線がウィンドウを超えています

debugcn 投稿 Dev

user1111929

Bootstrap 4モーダルでミニフォームを作成したいのですが、何らかの理由でモーダルのフッターのボーダートップがモーダル幅を超えているようです。フッターのボーダートップを適切な幅に保つにはどうすればよいですか？完全に削除する方法を説明するこのトピックを見つけましたが、理想的には削除せず、正しい幅にするだけです。

JsFiddle：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>

ジェリー

モーダルフッター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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]