応答セマンティックUIフォーム

Question

こんにちは仲間のインターネット見知らぬ人:)あなたがたのうち、余裕がいくつかの時間を持っており、セマンティックUIを知っている場合、私はいくつかの助けをapreciateだろう...

私は、フォームを構築し、大規模によ画面には...

完璧に見えるが、問題は、私はsmalerの画面上での表示を開始するとき...要素が怒鳴る二つの画像のようにお互いをovelaping開始ocures：

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

私は1つ

だから、誰もこれまでか、もし解決策を持っている場合、誰が見ているセマンティック純粋に使用して...私自身のCSSのいずれかを書かれたhavent私のコードIDの問題はいくつかの助けを歓迎:)

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