Question

我有页眉和页脚固定，中心是矩形框登录表单，但它没有响应。

如何让它对所有设备和浏览器做出响应？

在我的屏幕上，打开正常，但在移动页脚非常靠近盒子，它被触摸。或者我需要具有响应性的页眉页脚登录。

 <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;
    }

Answer 1

您使用的是lg屏幕格式，请尝试使用xs或sm屏幕格式。这将帮助您使用网格系统Bootstrap

Answer 2

要使其响应，请使用bootstrap和Media Queries。这是一个例子：

/* 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。

我的登录页面响应

2 个答案: