我的登錄頁面響應

-1

我有頁眉和頁腳固定和中心是矩形框登錄窗體，但它沒有響應。我的登錄頁面響應

如何使它對所有設備和瀏覽器都響應？

在我的屏幕中，打開罰款，但在移動頁腳非常接近框，它被觸動。否則我需要使用登錄響應頁眉頁腳。

<section class="container login-form"> 
    <section> 
     <body class="container index"> 
      <div class="row"> 
      <form class="form-horizontal" name="contact_form" id="contact_form" method="post" action=""> 
       <input type="hidden" name="mode" value="login" > 
       <div class="heading"> 

       <p>LOGIN</p> 

       </br> 
       </div> 
       <div class="form-group"> 
       <label class="col-lg-4 control-label" for="username"> 
       <span class="required">*</span>Username</label> 
       <div class="col-lg-8"> 
        <input type="text" value="" placeholder="User Name" id="username" class="form-control" name="username" required="" > 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-lg-4 control-label" for="user_password"> 
    <span class="required">*</span>Password</label> 
       <div class="col-lg-8"> 
        <input type="password" value="" placeholder="Password" 
    id="user_password" class="form-control" name="user_password" 
    required=""> 
       </div> 
      </div> 

    </br> 
      <div class="form-group"> 
       <div class="col-lg-4 col-lg-offset-8"> 
        <button type="submit" name="go" class="btn btn-primary 
    btn-block">Login Now</button> 
       </div> 
      </div> 
      </section> 
    </section>

我的CSS代碼：

.heading p { 

     font-family: "Times New Roman", Georgia, Serif; 
     font-size: 26px; 
     color: #054185; 
     display: block; 
     } 


     .section { 
     height: 100%; 
     clear: both; 
     padding: 0px; 
     margin: 0px; 
     } 

     .form-group 
    { 
     font-family: "Times New Roman", Georgia, Serif; 
     font-size: 18px; 
     color: #054185; 
     } 



     .login-form { 
     text-align: center; 
     margin: 0 auto; 
     margin-top: 150px; 
     margin-bottom: 200px; 
     max-width: 460px; 
     } 
     .login-form > section { 
     background: rgba(255,255,255,.9); 
     padding: 35px 35px 25px 35px; 
     border-radius: 5px; 
     } 
     .login-form a { 
     color: #054185; 
     } 
     .login-form img { 
     display: block; 
     margin: 0 auto; 
     margin-bottom: 35px; 
     } 

     form[role=login] { 
     font: 13px/2.2em Lato, serif; 
    color: #999; 
    } 
    form[role=login] input, 
    form[role=login] > button { 
     font-size: 16px; 
    } 
    form[role=login] input { 
     color: #777; 
     background: #fbfbfb; 
     border: 1px solid #c1c1c1; 
     border-radius: 3px; 
     -webkit-box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1); 
      -moz-box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1); 
       box-shadow: inset 0 0 1px 1px rgba(150, 150, 150, .1); 
    } 
    form[role=login] > div { 
     margin: 25px 0; 
    } 
    form[role=login] > div button { 
     font-weight: bold; 
     font-size: 16px; 
     line-height: 1.25em !important; 
     border: 1px solid #c1c1c1; 
     background: #efefef; /* Old browsers */ 
     background: -moz-linear-gradient(top, #efefef 0%, #d1d1d1 100%); /* 
     FF3.6+ */ 
     background: -webkit-gradient(linear, left top, left bottom, color- 
     stop(0%,#efefef), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /* 
     Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /* Opera 
     11.10+ */ 
     background: -ms-linear-gradient(top, #efefef 0%,#d1d1d1 100%); /* IE10+ 
      */ 
     background: linear-gradient(to bottom, #efefef 0%,#d1d1d1 100%); /* W3C 
      */ 
     filter: progid:DXImageTransform.Microsoft.gradient( 
     startColorstr='#efefef', endColorstr='#d1d1d1',GradientType=0); /* IE6-9 
    */ 
    } 
    form[role=login] > button { 
     padding: 5px 40px; 
     margin-top: 15px; 
     margin-bottom: 15px; 
     background: #054185; 
    }

來源

2017-07-10 Vidhya Vidu

爲了使它響應使用引導和媒體查詢。下面是一個例子：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

}

像這樣你可以針對屏幕，只是針對特定的屏幕創建自定義CSS。

來源

2017-07-10 07:11:07 Marco

您正在使用lg屏幕格式，請嘗試使用xs或sm屏幕格式。這將幫助你與網格系統Bootstrap

來源

2017-07-10 07:00:28 DMC19

我的登錄頁面響應

回答

相關問題