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

我好像做错了什么：

Todo :

• 不希望文本框与标签重叠。
• 我怎么才能避免这种情况？我认为使用字段并指定它们的长度会起到很好的作用，显然不行。
• 如何使此响应，以便如果窗口被缩小，文本框将不会重叠的标签？

问题Gif :

​

Answer 1

如果您使用的是html5，则在标头中使用元标记，并避免在css中固定位置。

元name=“视口”content=宽度=设备宽度，初始比例尺=1.0“

这将设置页面的视图，这将为浏览器提供如何控制页面的尺寸和缩放的说明。

viewport元素为浏览器提供了如何控制页面尺寸和缩放的说明。

宽度=设备宽度部分设置页面的宽度，以跟随设备的屏幕宽度(这将根据设备的不同而变化)。

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