2014-09-28 2 views
0

나는 내 문제는 내가 모든 것을 시도한다는 브라우저가

투명한 아니라 내부에 내 로그인 객체, 사용자 이름과 암호 및 로그인 버튼이있어 크기를 조정할 때 잘 중간에 텍스트 상자를 유지하기 위해 부트 스트랩 3, HTML 서식을 도와 드릴까요 브라우저의 너비가 줄어들면 사용자 이름과 암호 텍스트 상자가 우물의 왼쪽으로 건너 뛰지 않도록하십시오. 이상하게도이 사이트에서 볼 수

내가 https://www.ascsol.co.uk/Account/Login?ReturnUrl=%2F

그냥 브라우저를 좁히고 사용자 이름과 암호 필드 자동

을 정당화 왼쪽보고 원하는대로 중간에 '나를 기억', 로고 및 로그인 버튼 숙박
<div class="row"> 
     <div class="col-lg-4"></div> 
     <div class="col-lg-4"> 
      <div class="well well-lg"> 

       <img class="img-rounded" width="279" height="54" src="~/content/images/EdgeLogoBig.jpg" /> 

       <br /> 

       @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
       { 
        @Html.AntiForgeryToken() 
        if (!Html.ViewData.ModelState.IsValid) 
        { 
         <div class="alert alert-danger"> 
          @Html.ValidationSummary(true,"Invalid username and/or password") 
         </div> 
        } 

        <div class="form-group"> 

         <div class="col-md-offset-3 col-md-6"> 
          @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "Username", autocomplete = "off" }) 

         </div> 
        </div> 

        <div class="form-group"> 

         <div class="col-md-offset-3 col-md-6"> 

          @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Password", autocomplete = "off" }) 


         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-offset-3 col-md-6"> 
          <div class="checkbox"> 
           @Html.CheckBoxFor(m => m.RememberMe) 
           @Html.LabelFor(m => m.RememberMe) 
          </div> 

         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-offset-3 col-md-6"> 
          <input type="submit" value="Log in" class="btn btn-success btn-flat" /> 

         </div> 
        </div> 


       } 
      </div> 


     </div> 
     <div class="col-lg-4"></div> 
    </div> 
+0

col-sm- * 및 col-xs- *를 사용하면 도움이됩니다. 참조 : http://getbootstrap.com/css/#grid –

+0

크기를 입력하는 동안 텍스트 상자의 크기가 계속 변경되고 처음에는 크기가 작아지고 크기가 커지면 크기가 커지고 UI가 좋지 않습니다. 이게 의도적 인거야? 그렇지 않다면 너비 대신에 너비를 설정하십시오 : 100 % 및 display : block – Sanjeev

답변

0

는 해결 :

당신은 작은 크기의 여백 - 왼쪽 창 크기를 조정할 때 클래스 내부 '형태로 그룹'용기 'COL-SM은-3 오프셋'을 왜 설정하는 'col-sm-offset-3'의 값이 0이되고 컨트롤이 왼쪽으로 이동합니다. 콘텐츠를 가운데 맞추기 위해 추가 한 것 같습니다.

# 접근 방식 : 클래스 'form-control'에서 display:block을 제거하거나 display: inline-block;으로 변경하십시오. 크기 조정 창에서 텍스트 상자가 중앙에 유지됩니다.

센터에 체크 박스를 정렬에 대한

, CSS 클래스 아래에 추가

.checkbox{ 
text-align: center; 
} 
.checkbox input[type="checkbox"] { 
float: none; 
} 

내가 불을 지르고를 사용하여 사이트에이 수정 프로그램을 테스트 한이 문제를 해결할 것으로 보인다.