响应式语义 UI 形式

Question

你好互联网陌生人:)如果你们中的任何人有空闲时间并且知道语义UI我会很感激一些帮助...

我正在构建一个表单，在大屏幕上它看起来很完美...

但是当我开始在较小的屏幕上显示它时，问题就出现了……元素开始相互重叠，如下面的两张图片所示：

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

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

因此，如果有人对此有解决方案，或者如果有人在我的代码 ID 中看到问题，请提供帮助:)

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

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"> 在你的 header 中。

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

Answer 3

我遇到了这个问题，并且根据此处建议的所有更改，问题仍然只存在于下拉字段中。

我的解决方案是将 <select name="name" class="ui dropdown"> 更改为 <select name="name" class="ui dropdown fluid">（添加液体 class）。这阻止了下拉菜单跳过其他字段，就像在 OP 的示例中一样。

HTML 的结构与@VtoCorleone 的回答相同，并且下拉列表先前已使用 $(".ui.dropdown").dropdown() 初始化。

响应式语义 UI 形式

Responsive Semantic UI form

html

javascript

css

responsive-design

semantic-ui