양식 응답 형

Question

jumbotron 내부에 양식을 만들고 있는데 어떤 이유로 바탕 화면보기에 좋게 보이지만 휴대 전화를 볼 때 점보트론 밖으로 나옵니다. 내 코딩을 할 netbeans 사용하고 있습니다. 심지어 @media (최대 너비 : 620px)를 사용합니다. 나는 구글을 사용하여 시도했지만 실패 :(

#wrapper{ 
 
     width: 500px; 
 
     height: 700px; 
 
     position: relative; 
 
     margin: 0 auto; 
 
     background-color: rgba(255,255,255,.75); 
 
     text-align: center; 
 
     
 
    } 
 
    form{ 
 
     color: black; 
 
     text-align: center; 
 
     
 
    } 
 
    div{ 
 
     clear: both; 
 
    } 
 
    #off{ 
 
     background-color: rgba(225,0,0,.85); 
 
     color: white; 
 
     width: 525px; 
 
     height: 140px; 
 
     font-size: 1rem; 
 
     text-align: center; 
 
    } 
 
    
 
    .formHeader{ 
 
     color: #104c8b; 
 
    } 
 
    .formFooter{ 
 
     background-color: rgba(0,0,255,.5); 
 
     color: white; 
 
     margin: 65px 0 0 0; 
 
    } 
 
    
 
    @media(max-width: 620px) { 
 
     
 
     #wrapper{ 
 
     width: 100px; 
 
     height: 100px; 
 
     position: relative; 
 
     margin: 0 auto; 
 
     background-color: rgba(255,255,255,.75); 
 
     text-align: center; 
 
     
 
    }

<section id="top" class="jumbotron"> 
 
      <div class="container-fluid"> 
 
       <div class="row text-center"> 
 
        <div id="wrapper"><p>Contact Form</p> 
 
         <div class="formHeader"> 
 
          
 
         </div> 
 
       <form action="test.html" method="get" name="test" id="myForm"> 
 
        <label>Name</label><input name="name" type="text" /><br> 
 
        <label>Email</label><input name="email" type="text" /><br> 
 
        <label>Phone</label><input name="number" type="text" /><br> 
 
        <input type="submit" value="Send"/> 
 
       </form> 
 
        <div class="formFooter"> 
 
          
 
        </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </section> 
 

프레임 워크로 부트 스트랩 사용하고 당신이 그것을 잘 ... 프레임 워크의 모든 사용을하지 않는 수치를 보이는 점을 감안

Answer 1

.와 Bootstrap의 반응 형 클래스와 폼 컨트롤을 사용하기 위해 HTML을 약간 재구성하면 원하는 응답 성을 쉽게 얻을 수 있습니다.

대부분은 그리드 레이아웃에 필요한 .col-*-*을 추가하는 것입니다. 물론 부트 스트랩 클래스를 귀하의 input 및 label 요소 등이 있습니다. 부트 스트랩의 프레임 워크 및 현대 입력 분류 ​​(예 : tel 또는 email 등)를보다 잘 반영하도록 코드가 크게 변경되었지만 Bootply 예제가 아래에 나와 있습니다.

http://www.bootply.com/mPNCZyXbbD

html로 :

<section id="top" class="jumbotron"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
     <div class="form-wrapper text-center"> 
      <p>Contact Form</p> 

      <form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal"> 

      <div class="form-group"> 
      <label for="name" class="col-sm-2 control-label">Name</label> 
      <div class="col-sm-10"> 
       <input name="name" type="text" class="form-control"> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10"> 
       <input name="email" type="email" class="form-control"> 
      </div> 
      </div> 

      <div class="form-group"> 
      <label for="email" class="col-sm-2 control-label">Phone</label> 
      <div class="col-sm-10"> 
       <input name="number" type="tel" class="form-control"> 
      </div> 
      </div> 

      <button type="submit" class="btn btn-default">Send</button> 
      </form> 

     </div> 
     </div> 
    </div> 
    </div> 
</section> 

그리고 CSS :

이

.form-wrapper { 
    padding: 15px; 
    background: rgba(255,255,255,0.75); 
}