【发布时间】：2018-10-03 22:44:23
【问题描述】：
我正在尝试使用 W3.CSS 制作一个根据屏幕分辨率或浏览器窗口大小动态缩小自身的表单。在其默认状态下，它应该有一行包含“姓名”和“电话号码”列，一行包含“电子邮件”和“公司”列，一行包含“评论”列，以及一行包含验证码框和提交按钮。在收窄状态下，所有列都应堆叠在一起。如果您在this fiddle 中展开窗口，您将看到发生了所需的行为。有问题的小提琴可以是seen here。如果你比较这两者，你会发现元素的数量在很大程度上是相同的。唯一的区别是有效的有一些额外的元素，还有一些其他的细微差别。在过去的几个小时里，我一直在检查这些，如果有不同的（或多组）眼睛可以帮我检查它们，我将不胜感激。
不展开的版本：
<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
<div style="padding: 50px 0px;line-height: 22px;font-weight: normal;text-align:center;background-color: rgb(234, 234, 234);">
<div class="w3-row">
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Name_input">Name</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<select>
<option> NodeList</option>
</select>
</div>
</div>
</div>
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Phone_input">Phone</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="Phone_input" style="width:100px;">
</div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="email_input">email</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="email_input" style="width:100px;">
</div>
</div>
</div>
<div class="w3-col 16">
<!--make a row for the label and input-->
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 14">
<label for="Company_input">Company</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 18">
<input type="text" id="Company_input" style="width:100px;">
</div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<!-- make a col for the label -->
<div class="w3-col 12">
<label for="comments_input">comments</label>
</div>
<!-- make a col for the input -->
<div class="w3-col 110">
<textarea id="comments_input" style="height: 103px; font-size: 20px; margin: 0px; width: 322px;"></textarea>
<!-- if this was the last non-col input, add an additional row for the prevention input and submit button-->
<div class="w3-row">
<div id="DynForm_Prevention_1496" class="w3-col 15">
<label for="DynBtn_Prevention_1496" id="DynBtn_Prevention_Label_1496">Enter product in the box</label>
<input name="DynBtn_Prevention_1496" type="text" id="DynBtn_Prevention_1496" style="font-weight:600;width:100px;">
<span id="DynBtn_Prevention_Keyword_1496" style="display:none;">product</span>
<span style="color:#ff0000">*</span>
<span style="color:#ff0000;display:none;" id="DynBtn_Prevention_Invalid_1496">Incorrect value, please try again.</span>
</div>
<div class="w3-col 17">
<div style="text-align:left;padding:0px">
<a id="submitBtn_1496" class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif" href="http://dnndev.me/CAS_DynForm-Test/moduleId/1802/controller/Item/action/Submit">Submit product Pro Free Trial Request</a>
</div>
</div>
</div>
</div>
</div>
<div id="DynForm_Footer_1496" style="padding:20px;text-align:center">
<h5>Download instructions and licensing information will be emailed to you. Please make sure your email address is valid.</h5>
</div>
</div>
</div>
确实扩展的版本：
<div class="container-fluid" style="margin:0px;padding:0px;background-image:url('')">
<div style="padding: 50px 0px; line-height: 22px; font-weight: normal; text-align:center;background-color: rgb(234, 234, 234);">
<div class="w3-row">
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name" style="font-size:22px">Name<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Name" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Name"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl01" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span>
</div>
</div>
</div>
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone" style="font-size:22px">Phone Number<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Phone" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Phone"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl03" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email" style="font-size:22px"> Email<span style="color:#ff0000">*</span></label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$email" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_email"
style="width:85%;font-size:22px"><br>
<span id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_ctl05" class="NormalRed xmp-validation" style="font-size:16px;display:none;">Required</span></div>
</div>
</div>
<div class="w3-col l6">
<div class="w3-row">
<div class="w3-col l4">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company" style="font-size:22px">Company</label></div>
<div class="w3-col l8">
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$Company" type="text" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_Company"
style="width:85%;font-size:22px"></div>
</div>
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l2">
<label for="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments" style="font-size:22px">Comments</label></div>
<div class="w3-col l10">
<textarea name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$comments" rows="2" cols="20" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_comments"
style="height:120px;width:85%;font-size:20px"></textarea>
<br>
<div style="text-align:center;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif;padding-top:15px">
<div id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_vsDemoRequestTable" class="NormalRed xmp-validation" style="font-size:16px;display:none;">
</div>
</div>
<br>
<div class="w3-row">
<div class="w3-col l5">
<div style="float:left;padding-left:10px">
<img src="/portals/0/images/logos/product_thumbnail2.png" height="22"> </div>
<div style="float:left;font-size:18px"> <span style="color:#ff0000">Enter <b>product</b> in the
box.</span></div>
<div style="clear:both"></div>
<input name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$productcaptcha" type="text" maxlength="6" id="dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_productcaptcha"
style="font-size:16px;width:88px;margin-bottom:10px"><span style="color:#FF0000">*</span>
</div>
<div class="w3-col l7">
<div style="text-align:left;padding:0px">
<input type="submit" name="dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08" value="Submit product Pro Free Trial Request"
onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08", "", true, "dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_XMPVAL", "", false, false))"
class="btn btn-primary" style="font-size:18px;padding:20px 10px;font-weight:600;border-radius:6px;color:#fff;font-family: 'Segoe UI',Tahoma,Helvetica,Arial,sans-serif"></div>
</div>
</div>
</div>
</div>
<div style="padding:20px;text-align:center">
<h5>
Download instructions and licensing information will be emailed to you. Please make sure your email address is
valid.
</h5>
</div>
【问题讨论】：
标签： w3.css