Responsive forme UI sémantique

Question

Bonjour étrangers collègues internet :) Si l'un de vous a un temps libre et sait UI sémantique J'apreciate aide ...

je construis une forme et un grand écrans, il semble parfait ...

mais le problème ocures quand je commence à afficher sur les écrans ... les éléments les petites salles commencent ovelaping les uns des autres comme sur les deux images ci-dessous:

Mon code HTML est:

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

BTW Je nai écrit de ma propre CSS ... en utilisant uniquement la sémantique d'un

Donc, si quelqu'un a une solution à ce ou si quelqu'un voit un problème dans mon code id aprécier un peu d'aide :)

PS Désolé pour le mauvais anglais ... ce n'est pas ma langue maternelle

Answer 1

Ne pas utiliser les grilles. Stick avec les multiples classes de champ que fournit l'interface utilisateur sémantique.

Semantic-UI multiple fields in forms

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

Answer 2

Cela m'a peu trop mais assurez-vous que vous avez <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> dans votre tête.

Source: https://github.com/Semantic-Org/Semantic-UI/issues/3152