实现 - 移动设备中的模态正在缩小

Question

我用materialziecss库完成了这个程序。

MY Model IS like this first

But when I try to focus on that and try to type something it looks like this

我不知道当我在他们上面打字时它会缩小。我在下面使用的代码如下：

<div id="modal2" class="modal  modal-fixed-footer">
    <div class="modal-content">

        <h5 class="text-center" style="color:#33383b; font-weight:bold;">Fill your details</h5>
        <br>
        <form>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;First Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Last Name</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Email</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="last_name" type="password" class="validate">
                    <label for="last_name">&nbsp; &nbsp;Password</label>
                </div>
            </center>
            <center>
                <div class="input-field col-md-8">
                    <input id="dob" type="text" class="datepicker">
                    <label for="dob">&nbsp; &nbsp; Date Of Birth</label>
                </div>
            </center>
        </form>
    </div>
    <div class="modal-footer">
        <div class="text-center">
            <button class="modal-action btn waves-effect waves-green">SignUp</button>
            <button class="modal-action modal-close btn waves-effect waves-green">Close</button>
        </div>
    </div>
</div>

我所做的造型如下：

#modal2{
    width:100% !important;
}

Answer 1

您还必须设置max-width: 100%。如果您想要全屏模式，请尝试：

#modal2 {
 max-width: 100%;
 width: 100%;
 max-height: 100%;
 height: 100%;
}

如果没有，请尝试添加!important。