响应语义UI形式

Question

你好老乡互联网陌生人:)如果你们有一些空闲时间，知道语义UI我apreciate一些帮助......

我建立一个形式和大屏幕看起来完美...

但是当我开始在smaler屏幕上显示它的问题ocures ...的元素开始ovelaping对方喜欢上两个图像波纹管：

我的HTML代码：

<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我还没有写任何我自己的CSS ...用纯语义一个

因此，如果任何人有一个解决的办法，或者如果有人看到一问题在我的代码ID apreciate一些帮助:)

PS对不起，我的母语为

Answer 1

请勿使用网格。坚持语义ui提供的多个领域类。

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

此位我太多，但要确保你有你的头 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">。

来源：https://github.com/Semantic-Org/Semantic-UI/issues/3152