Блог

Главная - Вопросы по программированию - Загрузочный модальный контент, выходящий из модального при изменении размера браузера

Загрузочный модальный контент, выходящий из модального при изменении размера браузера

#html #css

#HTML #css

Вопрос:

Я хочу сделать свой загрузочный модальный контент отзывчивым, но когда я изменяю модальное содержимое браузера, такое как модальный заголовок, текстовые поля и кнопка входа, выходящие из 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">amp;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>

Комментарии:

1. можете ли вы создать jsfiddle для той же проблемы, таким образом, мы можем проверить вашу проблему

Ответ №1:

попробуйте этот способ для тега изображения

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

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

Комментарии:

1. Спасибо, Лалджи Тадхани

Метки: ,