缩小最小屏幕时表单不响应答案

【问题标题】：Form Not Responsive When Decrease Smallest Screen缩小最小屏幕时表单不响应
【发布时间】：2018-01-14 18:15:30
【问题描述】：

我有一个简单的表单，我希望它甚至可以响应像 Iphone 5 这样的最小屏幕。当它在大屏幕上时，它没有问题，但是当它减小时它会破坏表单。如何使表单响应的技术是什么。最快的方法是什么？

html, body{
    font-family: Helvetica;
    font-size: 12px;
}
.center_div{
    margin: 0 auto;
    width: 40%;
    padding: 10px;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chinese</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
        <div class="row">
                <div class="panel panel-danger login">
                    <div class="panel-heading">
                        <h3 class="text-center title">China</h3>
                    </div>
                    <br>
                    <div class="container-fluid"> 
                        <div class="panel-body">   
                            <div class = "form-group">
                                <label>Username</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                    <input type="text" id="id" name="email" class = "form-control">
                                </div>
                            </div>
                            <div class = "form-group">
                                <label>Password</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                    <input type="password" id="password" name="password" class = "form-control">
                                </div>
                            </div>
                            <div class = "form-group">
                                <label>No</label>
                                <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                    <input type="password" id="password" name="password" class = "form-control">
                                </div>
                            </div>
                            <br>
                            <a href="#" class="btn btn-danger btn-block">Login</a>
                            <br>  
                        </div>
                    </div>
                </div>
        </div>
    </div>
</body>

【问题讨论】：

标签： html forms twitter-bootstrap css responsive-design

【解决方案1】：

你必须在 div 中使用 col-lg/md/sm/xs-N , col-lg/md/sm/xs-offset-N 类而不是 width: 40%; 见https://getbootstrap.com/examples/grid/。使用水平方向有 12 个单元格的网格。您可以为每个屏幕定义单元格宽度和偏移量：超小、小、中、大。

https://jsfiddle.net/ej59s3jt/

<style>
html, body{
    font-family: Helvetica;
    font-size: 12px;
}
.center_div{
    margin: 0 auto;
    padding: 10px;
}
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chinese</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container center_div">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0 ">
            <div class="panel panel-danger login">
                <div class="panel-heading">
                    <h3 class="text-center title">China</h3>
                </div>
                <br>
                <div class="container-fluid"> 
                    <div class="panel-body">   
                        <div class = "form-group">
                            <label>Username</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                <input type="text" id="id" name="email" class = "form-control">
                            </div>
                        </div>
                        <div class = "form-group">
                            <label>Password</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                <input type="password" id="password" name="password" class = "form-control">
                            </div>
                        </div>
                        <div class = "form-group">
                            <label>No</label>
                            <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                                <input type="password" id="password" name="password" class = "form-control">
                            </div>
                        </div>
                        <br>
                        <a href="#" class="btn btn-danger btn-block">Login</a>
                        <br>  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：