响应式语义化UI表单

Question

大家好，如果你们中有人有时间并且了解Semantic 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代码...纯粹使用语义化的代码。

所以如果有人有解决方案，或者看到我的代码有问题，我会非常感激你的帮助 :)

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

- weinde

Answer 1

不要使用网格布局。请使用Semantic UI提供的多个字段类。 Semantic-UI表单中的多个字段

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

- VtoCorleone

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

- mistertee

---

谢谢回答，我已经包含了:D - weinde

Answer 3

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

对我来说，解决方案是将 <select name="name" class="ui dropdown"> 更改为 <select name="name" class="ui dropdown fluid">（添加 fluid 类）。这样可以防止下拉菜单跳过其他字段，就像 OP 的示例一样。

HTML 的结构与 @VtoCorleone 的答案相同，并且下拉菜单之前已使用 $(".ui.dropdown").dropdown() 进行初始化。

- ph0enix