Question

我正在使用Bootstrap和a login form snippet，希望在某些文本旁边有一个登录屏幕。

我用来完成此操作的HTML和CSS工作得相当好，直到调整屏幕大小。当屏幕变小时，登录框开始变大（具体地说，整个框获得更大的宽度，标签标题变得更大）。它变得如此之大，以至于左栏中的文字消失了。

我可以通过调整大小（在屏幕较小的设备上没有文字空间，所以最好只有一个登录框），但我不希望它变得更高，并且有它以不成比例的方式调整大小（例如，＆＃34;忘记密码＆＃34;文本位于标题之上，文本框保持较小而标签变大）。

全屏截图（相当满意）：

Okay

屏幕截图小宽度（对此不满意）：

Not okay

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

可以通过向两个div添加课程col-xs-6来解决此问题，只需在Fiddle中进行调整即可。这样可以解决这个问题，因为对于较小的视点，宽度将为50％。

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

Answer 2

我尝试将右侧列内联的填充应用于面板信息子div作为边距。它可能搞乱了引导列的宽度。另外，为什么你在左边的div中使用了一个jumbotron类？

调整屏幕大小时，登录框变得太宽

2 个答案: