时间戳

首页 > 解决方案 > 为什么我的 W3.CSS 响应式网格停留在折叠状态？

w3.css - 为什么我的 W3.CSS 响应式网格停留在折叠状态？

问题描述

我正在尝试使用 W3.CSS 制作一个根据屏幕分辨率或浏览器窗口大小动态缩小自身的表单。在其默认状态下，它应该有一行包含“姓名”和“电话号码”列，一行包含“电子邮件”和“公司”列，一行包含“评论”列，以及一行包含验证码框和提交按钮。在收窄状态下，所有列都应堆叠在一起。如果您在这个 fiddle中展开窗口，您将看到所需的行为发生了。有问题的小提琴可以在这里看到. 如果你比较这两者，你会发现元素的数量在很大程度上是相同的。唯一的区别是有效的有一些额外的元素，还有一些其他的细微差别。在过去的几个小时里，我一直在检查这些，如果另一组（或多组）不同的眼睛可以帮我检查它们，我将不胜感激。

不展开的版本：

<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">&nbsp;&nbsp;<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(&quot;dnn$ctr10693$XModPro$ctl00$ctl00$ctl00$ctl08&quot;, &quot;&quot;, true, &quot;dnn_ctr10693_XModPro_ctl00_ctl00_ctl00_XMPVAL&quot;, &quot;&quot;, 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

解决方案

问题是，在不起作用的版本中，我在“w3 -col”类。

推荐阅读