화면 크기를 조정하면 로그인 상자가 너무 넓어집니다.

부트 스트랩과 a login form snippet을 사용하여 일부 텍스트 옆에 로그인 화면이 표시됩니다.화면 크기를 조정하면 로그인 상자가 너무 넓어집니다.

이 작업을 수행하기 위해 사용하고있는 HTML과 CSS는 화면 크기가 조정될 때까지 비교적 잘 작동합니다. 화면이 작아지면 로그인 상자가 커지기 시작합니다 (특히 전체 상자의 너비가 커지고 레이블 머리글의 높이가 커짐). 너무 커서 왼쪽 열의 텍스트가 사라집니다.

크기를 조정해도 괜찮습니다. (더 작은 화면의 장치에서는 텍스트를위한 공간이 없으므로 로그인 상자 만있는 것이 낫습니다.)하지만 더 큰 높이가되고 싶지는 않습니다. (예 : "비밀번호 분실"이라는 텍스트가 제목 상단에오고 텍스트 상자는 작게 유지되면서 레이블이 커짐).

스크린 샷 전체 폭 (이 합리적으로 행복) : (이 행복하지)

Okay

스크린 샷 더 작은 폭 :

Not okay

는 HTML (CSS는 부트 스트랩입니다 .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/

화면 너비를 늘리는 동안 사람이 왜 이렇게 못생긴 방식으로 크기를 조정하는지 보는 사람이 있습니까? 그렇다면 어떻게하면 크기가 조정되어 모든 것이 더 큰 비율로 유지 될 수 있습니까?

감사합니다.

출처

2014-12-26 Erwin Rooijakkers

잠깐 살펴본 후 일부 너비에 대한 백분율을 사용한다는 것을 알았습니다. 문제가있을 수 있습니다 .. '죄송합니다. 시간을내어 읽을 수 없습니다' – bakriawad

@bakriawad Thanks. –