html - 语义 ui 元素没有响应

Question

HTML :

 <div id="tabNewAutomaticPurchaseOrder" class="tTab">
        <div class="ui form stackable two column grid ">
            <div class="seven wide column">

                <h3 id="lblPurchaseDetailsAutomatictab" class="ui top attached tiny header">Bestillingsdetaljer</h3>
                <div class="ui attached segment">
                    <asp:Label ID="lblOrderNumberAutomatictab" class="inHeaderTextField1" Text="Serienr. Bestilling:" runat="server"></asp:Label>
                    <asp:Label ID="Label11" class="inHeaderTextField2" Text="" runat="server"></asp:Label>
                    <asp:Label ID="lblOrderDateAutomatictab" class="inHeaderTextField3" Text="Bestillingsdato:" runat="server"></asp:Label>
                    <asp:Label ID="Label13" class="inHeaderTextField4" Text="" runat="server"></asp:Label>
                    <label class="inHeaderCheckbox">
                        Vis/Lukk
                            <button id="btnViewDetailsNEWPO2" class="ui btn mini">
                                <i class="caret down icon"></i>
                            </button>
                    </label>
                    <div class="itemadd-container">
                        <div class="fields">
                            <div class="three wide field">

                                <div id="lblSupplierNameAutomatictab" class="ui blue horizontal label">Leverandør</div>
                            </div>
                            <div class="three wide field">
                                <asp:TextBox ID="txtbxSupplierNameAutomatictab" runat="server" data-submit="SAVE_SUPPLIER_ITEM" meta:resourcekey="txtTechMakeResource1"></asp:TextBox>
                            </div>
                            <div class="two wide field">
                                <asp:TextBox ID="txtbxSupplierIdAutomatictab" runat="server" Enabled="false" ForeColor="Red"></asp:TextBox>
                            </div>
                        </div>

                        <div class="fields">
                         <div class="three wide field">                          
                             <div id="lblOrdertypeAutomatictab" class="ui blue horizontal label">Ordretype</div>
                        </div>
                        <div class="three wide field">
                            <asp:DropDownList ID="DropDownList1" CssClass="dropdowns" runat="server" meta:resourcekey="ddlordertypeFormResource1">
                                <asp:ListItem Text="" Value="" Selected="true"/>
                                <asp:ListItem Text="RE" Value="RE" />
                                <asp:ListItem Text="LO" Value="LO"/>
                            </asp:DropDownList>
                        </div>
                        <div class="two wide field">
                                <input type="button" id="Button1" runat="server" class="ui btn mini" value="+" />
                         </div>
                        </div>

                    <div class="fields">
                        <div class="three wide field">
                            <label id="Label16" runat="server">Forsendelsesmåte</label>
                        </div>

                        <div class="three wide field">
                            <asp:DropDownList ID="DropDownList2" CssClass="dropdowns" runat="server" meta:resourcekey="ddlordertypeFormResource1">
                                <asp:ListItem Text="" Value="" />
                                <asp:ListItem Text="Tog" Value="66" Selected="true"/>
                                <asp:ListItem Text="Bil" Value="67" />
                                <asp:ListItem Text="Hente selv" Value="68"/>
                            </asp:DropDownList>
                        </div>
                        </div>


                   <div class="fields">

                        <div class="two wide field">
                            <label id="Label17" runat="server">Forventet ankomst</label>
                        </div>
                        <div class="two wide field">
                            <asp:TextBox ID="TextBox8" CssClass="NEWpodatepicker" runat="server" data-submit="SAVE_SUPPLIER_ITEM" meta:resourcekey="txtTechMakeResource1" ForeColor="Red" Enabled="false" ></asp:TextBox>
                        </div>


                        </div>

                </div>
                    </div>
            </div>
    </div>

好像我在这里做错了什么:

待办事项:

• 不希望文本框与标签重叠。
• 我怎样才能避免这种情况？我认为使用字段并指定他们的长度会起到作用，显然不会。
• 我怎样才能使它具有响应性，以便在窗口缩小时文本框不会与标签重叠？

问题动图:

Answer 1

如果您使用的是 html5，请在标题中使用 meta 标记，并避免在 css 中使用固定位置

meta name="viewport"content="width=device-width, initial-scale=1.0"

这将设置页面的视口(viewport)，这将向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

视口(viewport)元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。