html - 调整屏幕尺寸后登录框变得太宽

Question

我正在使用 Bootstrap 和 a login form snippet想法是在一些文本旁边有一个登录屏幕。

在调整屏幕尺寸之前，我用来完成此任务的 HTML 和 CSS 工作得相当好。当屏幕变小时，登录框开始变大(具体来说，整个框的宽度变大，标签标题的高度变大)。它变得如此之大以至于左栏中的文本消失了。

我可以接受这种调整大小(在屏幕较小的设备上没有文本空间，所以最好只有一个登录框)，但我不希望它变得更高并且有它以不成比例的方式调整大小(例如，“忘记密码”的文本出现在标题的顶部，文本框保持较小，而标签变大)。

全宽屏幕截图(对此相当满意):

屏幕截图宽度较小(对此不满意):

HTML: (CSS 是 bootstrap.css)

<div class="row">
    <div class="col-md-6 col-sm-6 pull-left">
        <div style="padding: 3.5%; padding-top: 30px">
            <div class="jumbotron">
                <h2>Welkom bij de Zaaikalender.</h2>
                <p>Blablabla...</p>
            </div>
        </div>
    </div>
    <!-- Login box inspired by http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel -->
    <div id="loginbox" style="padding: 3.5%; font-size: 10px;" class="col-md-6 col-sm-6">                    

        <div class="panel panel-info" >

            <div class="panel-heading">
                <div class="panel-title">Inloggen</div>
                <div style="float: right; font-size: 80%; position: relative; top:-10px"><a href="#">Wachtwoord vergeten?</a></div>
            </div>     

            <div style="padding-top: 30px" class="panel-body" >

                <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                <form action="/Account/Login?ReturnUrl=%2F" class="form-horizontal" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="BrShx6jCTpSqw1mUw0DrxKrB8vrIRW1he1T-FycNwwMLNtwvtJwvhshhomZF5zStLJ43lP9PbuxmB4TIO8Qmcwatd7P6AavYQOW4nfCWZn41" />                        <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>                                   
                        <span>
                            <input class="form-control" data-val="true" data-val-required="*" id="UserName" name="UserName" placeholder="Gebruikersnaam of e-mailadres" type="text" value="" />
                            <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
                        </span>
                    </div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input class="form-control" data-val="true" data-val-required="*" id="Password" name="Password" placeholder="Wachtwoord" type="password" />
                        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                    </div>
                    <div class="input-group">
                        <div class="checkbox">
                            <label style="color: black;">
                                <input class="checkbox" data-val="true" data-val-required="The field Onthoud mij? is invalid." id="RememberMe" name="RememberMe" type="checkbox" value="1" /><input name="RememberMe" type="hidden" value="false" />
                                Onthoud mij.
                            </label>
                        </div>
                    </div>
                    <div style="margin-top: 10px" class="form-group">
                        <!-- Button -->
                        <div class="col-sm-12 controls">
                            <button type="submit" class="btn btn-success">Login  </button>
                            <a id="btn-fblogin" href="#" class="btn btn-primary">Login met Facebook</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12 control">
                            <div style="border-top: 1px solid#888; padding-top: 15px; font-size: 85%; color: black;" >
                                Ik heb nog geen account! 
                                <a href="Register" onClick="$('#loginbox').hide(); $('#signupbox').show()">
                                    Registreren.
                                </a>
                            </div>
                        </div>
                    </div>  
                </form>
            </div><!-- End panel body -->
        </div><!-- End panel -->
    </div><!-- End login box column-->
</div><!-- End row -->

JSFiddle:http://jsfiddle.net/DTcHh/2977/

有没有人明白为什么它在增加屏幕宽度的同时以如此丑陋的方式调整大小？如果是这样，如何才能以某种方式调整大小，使所有内容在变大时保持原来的比例？

谢谢。

Answer 1

这可以通过将类 col-xs-6 添加到两个 div 来解决，只需在您的 Fiddle 中进行调整即可。 .这修复了它，因为对于较小的视点，宽度将为 50%。

有关使用 Bootstrap 网格的更多详细信息，您可以查看例如http://getbootstrap.com/examples/grid/