Question

我想让我的bootstrap模态内容响应，但当我调整浏览器模态内容，如模态标题，文本框和登录按钮走出div时，请让我知道如何使它们响应。这是代码。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4 /jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="container">
            <h2>Modal Example</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="vertical-align:central">Login With Facebook</h4>

                        </div>
                        <div class="modal-body">
                            <img class="modal-content" src="http://www.firstbaptistashland.com/wp-content/uploads/2015/09/facebook-logo-png-transparent-background-150x150@2x.png" width="100" height="100" style="margin-left:220px;display:block;width:auto;" />
                            <br>
                            Email:<input type="text" /><br>
                            Password::<input type="text" />
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn-default modal-content" style="background-color: #4CAF50; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 24px; margin-right: 200px; cursor: pointer; " value="Login" />


                        </div>
                    </div>`

                </div>
            </div>

        </div>

Answer 1

在图片标记

上尝试这种方式

style="margin-left:220px;display:block;width:auto;"

style="width: auto; left: 50%; transform: translateX(-50%); display: block;"

调整大小浏览器时来自模态的Bootrap模态内容

1 个答案: