我正在尝试使用W3.CSS来创建一种表格，该表格根据屏幕分辨率或浏览器窗口的大小来动态缩小自身。在默认状态下，该行应包含“名称”和“电话号码”列，包含“电子邮件”和“公司”列的行，包含“注释”列的行，以及包含CAPTCHA框和提交按钮。在缩小状态下，所有列都应堆叠在一起。如果展开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>
答案 0 :(得分：0)
问题是，在无法正常工作的版本中，我使用了“ 12,14,15,16,17,18,110”，而不是“ l2，l4，l5，l6，l7，l8，l10” “ w3-col”类。