어떻게 semantic UI 페이지를 반응 적으로 만드나요?

Question

웹 페이지를 개발하는 데 semantic UI를 사용하고 있습니다. 나는 그들에게 반응이 좋기를 바란다. 내 휴대 전화에서 웹 페이지를 열려고했지만 그리드의 크기가 최소로 변경되어 보이지 않습니다. 코드에 어떤 변화를 주어야합니까?

<div class="ui six wide column 
segment" id="logBox" 
style="background-color: #F1F0FF;"> 

    <div class="ui centered 
       header"><h1>Log-In to your 
    account</h1> 
        </div> 

     <form class="ui form"> 
      <div class="field"> 
       <div class="ui left icon 
       input"> 
       <i class="user icon"></i> 
       <input type="text" 
     placeholder="Email-id" > 
       </div> 
      </div> 

      <div class="field"> 
       <div class="ui left icon 

        input"> 
        <i class="lock icon"></i> 
        <input type="password"  

      placeholder="Password"> 



      </div> 
      </div> 

는 CSS :

@media only screen and (max- 
     width: 640px){ 

     #logBox{ 
      width:100%; 
     } 
     } 

Answer 1

나는 일정 중단 후 요소를 전체 폭을하고 수레를 제거합니다. 일반적으로 모든 그리드 요소에는 위의 경우 'ui'와 같은 공통 클래스가 있으므로 다음과 같이 사용할 수 있습니다.

.ui { 
    display: block; 
    float: none; 
    width: auto; 
}