응답 시맨틱 UI 양식

안녕하세요 동료 인터넷 낯선 : 당신의이 여분의 시간을 가지고 있으며, 내가 도움이 뵙죠 것 의미 UI ...응답 시맨틱 UI 양식

내가 양식을 구축하고 대형에있어 알고있는 경우 완벽 보이는 화면은 ...

하지만 smaler 화면에 표시 시작할 때 문제가 ocures ... 요소가 두 이미지에 서로 같은 ovelaping 시작은 노호 :

내 HTML 코드는 다음과 같습니다 BTW

<h1>Računi (2017)</h1> 

<div class="ui form" style="padding: 20px"> 
    <div class="ui stackable equal width grid"> 
     <div class="row"> 
      <div class="column"> 
       <div class="field"> 
        <label>Št. računa</label> 
        <div class="ui left icon input"> 
         <input type="text" name="racun_id" placeholder="št. računa"> 
         <i class="hashtag icon"></i> 
        </div>z 
       </div> 
      </div> 

      <div class="column"> 
       <div class="field"> 
        <label>Ime in priimek</label> 
        <div class="ui left icon input"> 
         <input type="text" placeholder="Vnesi..."> 
         <i class="user icon"></i> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Naslov</label> 
        <div class="ui left icon input"> 
         <input type="text" name="kupec_naslov" placeholder="Vnesi..."> 
         <i class="marker icon"></i> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Začetni datum</label> 
        <div class="ui left icon right labeled input"> 
         <i class="calendar icon"></i> 
         <input type="text" name="zac" value="14.9"> 
         <div class="ui basic label"> 
          2017 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Končni datum</label> 
        <div class="ui left icon right labeled input"> 
         <i class="calendar icon"></i> 
         <input type="text" name="kon" value="14.9"> 
         <div class="ui basic label"> 
          2017 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="column"> 
       <div class="field"> 
        <label>Referent</label> 
        <div class="ui selection dropdown"> 
         <input type="hidden" name="referent_id"> 
         <i class="dropdown icon"></i> 
         <div class="default text">Izberi...</div> 
         <div class="menu"> 
          <div class="item" data-value="1">Male</div> 
          <div class="item" data-value="0">Female</div> 
          <div class="item" data-value="1">Spaceman</div> 
          <div class="item" data-value="0">Spiderman</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Odprt račun</label> 
        <select class="ui dropdown"> 
         <option value="">--</option> 
         <option value="N">Odprt TRR</option> 
         <option value="C">Odprt Plačilna kartica</option> 
        </select> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Filter plačilnih kartic</label> 
        <div class="ui selection dropdown"> 
         <i class="payment icon"></i> 
         <input type="hidden" name="referent_id"> 
         <i class="dropdown icon"></i> 
         <div class="default text">Izberi...</div> 
         <div class="menu"> 
          <div class="item" data-value="">--</div> 
          <div class="item" data-value="isicvisa">ISIC Visa</div> 
          <div class="item" data-value="maestro">Maestro/BA</div> 
          <div class="item" data-value="visa">Visa</div> 
          <div class="item" data-value="mc">MasterCard</div> 
          <div class="item" data-value="karanta">Karanta</div> 
          <div class="item" data-value="diners">Diners</div> 
          <div class="item" data-value="amex">American Express</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Zaključeni odprti računi</label> 
        <div class="ui slider checkbox"> 
         <input type="checkbox" name="newsletter"> 
         <label> </label> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="field"> 
        <label>Izpiši račune:</label> 
        <button class="fluid ui primary button"><i class="terminal icon"></i>Izpis</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

나는 한

그래서 사람이 또는 경우 해결책이있는 경우 사람이 보는 시맨틱 순수하게 사용 ... 내 자신의 CSS의 작성 havent 한 내 코드 ID에 문제가 좀 도와주세요 :)

PS 나쁜 영어로 죄송합니다. 제 모국어가 아닙니다.

출처

2017-09-14 weinde

그리드를 사용하지 마십시오. 의미 론적 UI가 제공하는 여러 필드 클래스를 고수하십시오.

<div class="ui form"> 
    <div class="three fields"> 
    <div class="field"> 
     <label>First name</label> 
     <input type="text" placeholder="First Name"> 
    </div> 
    <div class="field"> 
     <label>Middle name</label> 
     <input type="text" placeholder="Middle Name"> 
    </div> 
    <div class="field"> 
     <label>Last name</label> 
     <input type="text" placeholder="Last Name"> 
    </div> 
    </div> 
</div>

출처

2017-09-15 15:24:55 VtoCorleone

덕분에, anwser에 대한 좋은 – weinde