Javascript 响应语义用户界面表单

各位网友好：）如果你们中有人有空并且知道语义UI我将非常感谢你们的帮助

我正在制作一个表格，在大屏幕上看起来很完美。。。

但当我开始在smaler屏幕上显示它时，问题就出现了。。。元素开始相互重叠，如下图所示：

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

Računi（2017年）
Št。拉胡纳
Z
普里梅克的Ime
纳斯洛夫
扎切特尼基准面
2017
孔č尼基准
2017
参照物
伊兹贝里。。。
男性
女性
太空人
蜘蛛侠
奥德普特拉昆
--
Odprt TRR
Odprt Plačilna kartica
滤层plačilnih岩溶
伊兹贝里。。。
--
ISIC签证
大师/文学学士
签证
万事达卡
卡兰塔
食客
美国运通
扎克尔朱埃尼奥德普尔蒂拉胡尼
伊兹皮什·拉胡内：
伊兹皮斯

顺便说一句，我还没有写过我自己的CSS。。。纯粹使用语义

因此，如果有人对此有解决方案，或者有人在我的代码id中发现问题，请提供帮助：）

---

p.S.对不起，英语不好。。。这不是我的母语

不要使用网格。坚持使用语义ui提供的多个字段类

名字
中名
姓

这也咬了我一口，但请确保你有

在标题中

---

来源：

我遇到了这个问题，在这里建议的所有更改中，这个问题仍然只存在于下拉字段中

我的解决方案是将

更改为

（添加流体类）。这防止了下拉菜单跳过其他字段，如OP的示例中所示

---

HTML的结构与@VtoCorleone的答案中的结构相同，下拉列表以前是用

$（“.ui.dropdown”）.dropdown（）初始化的。dropdown（）

感谢anwser，我已经包括了：D

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